Question

我试图设置，以便当您将鼠标悬停在类.object1上时 - ＆gt;当你没有徘徊在它上面时，它应该显示.obj_1，它应该隐藏.obj_1。我的代码可能有点偏差，感谢您的帮助！

$(document).ready(function() {   
  $(".obj_1 , .obj_2").hide();
      });
      $(".object1").hover(
        function() { $(".obj_1").show(); },
        function() { $(".obj_2").hide(); }
   );
      $(".object2").hover(
        function() { $(".obj_2").show(); },
        function() { $(".obj_1").hide(); }
   );

Answer 1

非常简单，应该是

$(document).ready(function() {   
  $(".obj_1 , .obj_2").hide();
      });
      $(".object1").hover(
        function() { $(".obj_1").show(); },
        function() { $(".obj_1").hide(); }
   );
      $(".object2").hover(
        function() { $(".obj_2").show(); },
        function() { $(".obj_2").hide(); }
   );

“悬停”处理程序函数签名是（mouseInHandler，mouseOutHandler）。对于object1，您希望在mouseIn上显示obj_1，并将其隐藏在mouseOut上。您不需要在object1悬停处理程序上引用obj_2。

查看我制作的小提琴here

仅供参考 - 当您拥有复杂的内部内容时，悬停事件会很奇怪。（例如，div在另一个div中，依此类推）。我建议您使用"mouseenter"和"mouseleave"

在实现这是下降菜单问题后更新答案

CSS中的下拉菜单是一个很好的例子，其中“悬停”是不够的 - ＆gt;因为一旦你不再在链接上，子菜单就会消失......这不是我们想要的。

重要的是要注意有关下拉菜单的3件事：

他们可以（？应该？）纯粹用CSS实现
HTML结构很重要。

例如，请考虑以下结构：

<ul class="menu">
    <li>
    </li>
    <li>
        <ul class="menu">
         <li>
         </li>
        </ul>
    </li>
</ul>

这个结构是递归的 - 你可以有无限级别的子菜单 - 并且“li”上的mouseenter / mouseleave将保持，因为子菜单是“li”项的一部分。

要查看此操作，请查看my fiddle

请注意，我从onload代码中删除了第一个“hide”，并用css“display：none”替换它 - 它解决了页面加载时的闪烁（闪烁意味着 - 首先显示子菜单，一旦页面加载，我们隐藏它。）

一个css解决方案会包含一个带有“悬停”的选择器（是的，悬停..）

在谷歌搜索时，您可以找到大量关于它的博客文章。

Here is the first one I found.

Jquery Hover显示/隐藏问题

1 个答案: