如何在li元素悬停时显示和隐藏div？ [英] How to show and hide div on hover of li element?
本文介绍了如何在li元素悬停时显示和隐藏div？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有四个li元素，我想显示div并仅在悬停两个li元素时隐藏它。
这里是我的代码
I have four li elements, I want to show div and hide it on hover of two li elements only.
here is my code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
#first:hover
{
background-color: red;
}
#second:hover
{
background-color: red;
}
</style>
<script type="text/javascript">
$('#first li').hover(function(){
$('.div1', this).show(); //find the div INSIDE this li
},function(){
$('.div1', this).hide();
});;
</script>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li id="first"><a href="#news">News</a></li>
<li id="second"><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div class="div1" style="Width:200px;height:150px;border:2px solid black;display:none;">asd</div>
<div class="div2" style="Width:200px;height:50px;border:2px solid black;display:none;">sgtargewarasd</div>
</body>
</html>
推荐答案
（' ＃first li'）。hover（ function （）{
('#first li').hover(function(){
（' 。div1'， this ）。show（）; // 找到这里的div
}， function （）{
('.div1', this).show(); //find the div INSIDE this li },function(){
（' 。div1' ， this ）。hide（）;
}）;;
< / script >
< / head >
< 正文 >
< ul >
< li > < a href = #home > 主页< ; / a > < / li >
< li id = first > < ; a href < span class =code-keyword> = #news > 新闻< span class =code-keyword>< / a > < / li >
< span class =cod e-keyword>< li id = second > < a href = #contact > 联系< / a > < / li >
< li > < a href = ＃about > 关于< / a > < / li >
< / ul >
< div class = div1 style = 宽度：200P x;高度：150px;边框：2px纯黑色;显示：无; > asd < / div >
< div class = div2 样式 = 宽度：200px;高度：50px;边框：2px纯黑色; display：none; > sgtargewarasd < / div >
< / body >
< / html >
('.div1', this).hide(); });; </script> </head> <body> <ul> <li><a href="#home">Home</a></li> <li id="first"><a href="#news">News</a></li> <li id="second"><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <div class="div1" style="Width:200px;height:150px;border:2px solid black;display:none;">asd</div> <div class="div2" style="Width:200px;height:50px;border:2px solid black;display:none;">sgtargewarasd</div> </body> </html>
这篇关于如何在li元素悬停时显示和隐藏div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
