0

我正在尝试进行设置，以便当您将鼠标悬停在类 .object1 -> 上时，当您没有将鼠标悬停在其上时，它应该会显示 .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(); }
   );
4

1 回答 1

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。

看看我在这里制作的小提琴

仅供参考 - 当您有复杂的内部内容时，悬停事件会表现得很奇怪。（例如，另一个 div 中的 div 等等）。我建议你使用“mouseenter”和“mouseleave”

意识到这是一个下拉菜单问题后更新答案

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

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

  1. 它们可以（？应该？）纯粹用 CSS 来实现
  2. HTML 结构很重要。

例如，请考虑以下结构：

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

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

要查看此操作，请查看我的小提琴

另请注意，我从 onload 代码中删除了第一个“隐藏”，并将其替换为 css“display:none”——它解决了页面加载时的闪烁问题（闪烁的意思是——首先显示子菜单，一旦页面加载，我们隐藏它。 ）

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

在谷歌搜索时，你可以找到很多关于它的博客文章。

这是我找到的第一个。

于 2012-08-07T15:32:02.780 回答