Question

我有以下一段代码。

<div id="navigation">
    <ul class="nav">
         <li class="main1"><a href="about.php">about us</a>
              <ul class="sub_menu">
                   <li><a href="1.html">1</a></li>
                   <li><a href="2.html">2</a></li>
              </ul>
         </li>
    </ul>
</div>

当鼠标站在“main1”类而不是它的孩子身上时，我需要sub_menu可见。

所以我使用了以下代码

$(".main1").mouseover(function(){
     $(".main1.sub_menu").css("opacity","1");
});

这样可行，但问题是即使我将鼠标放在sub_menu及其子节点上（当它们的不透明度为零时），也会出现sub_menu。当我直接将鼠标放在“关于我们”链接上时，我只需要显示sub_menu。

我搜索了很多，但没有一个解决方案似乎适合我。

Answer 1

改变这个：

$(".main1.sub_menu").css("opacity","1");

到此：

$(this).find(".sub_menu").show();

Answer 2

更新了FIDDLE

<强> HTML

<div id="navigation">
    <ul class="nav">
         <li class="main1"><a href="about.php">about us</a>
              <ul class="sub_menu" style="opacity:0">
                   <li><a href="1.html">1</a></li>
                   <li><a href="2.html">2</a></li>
              </ul>
         </li>
    </ul>
</div>

<强> Jquery的

$(".main1").hover(function(){
     $(".main1 .sub_menu").css("opacity","1");
},function(){
     $(".main1 .sub_menu").css("opacity","0");
});

Answer 3

您遇到此问题是因为您正在将mouseover事件应用于main1，而main1也包含子元素。将其更改为：

$(".about_us").mouseover(function(){
     $(".main1.sub_menu").css("opacity","1");
});

并在您的关于我们的链接中添加一个about_us课程。

Answer 4

使用此代码

  $(".main1 :contains(about us)").hover(function () {
        alert(1);
    });

Answer 5

更改此

$(".main1").mouseover(function(){ $(".main1.sub_menu").css("opacity","1"); });

到

$(".main1 a").mouseover(function(){ $(".main1.sub_menu").css("opacity","1"); });

并且除了我们之外你还有更多的锚标签，给它一个像id="aboutus"这样的id 并在jquery中使用它：

$("#aboutus").mouseover(function(){ $(".main1.sub_menu").css("opacity","1"); });

在列表中选择父li而不在jquery中选择其子项

5 个答案: