如何在使用 JQuery 悬停另一个元素时隐式悬停两个元素？答案

【问题标题】：How to hover two elements implicitly while hovering another one with JQuery?如何在使用 JQuery 悬停另一个元素时隐式悬停两个元素？
【发布时间】：2013-12-24 06:30:00
【问题描述】：

有没有办法在使用 JQuery 悬停在另一个元素上时触发两个元素的悬停？

这是我的 HTML：

<!DOCTYPE HTML>
   <html lang="">
    <head>
      <meta http-equiv="Content-Type" content="text/html"/>
      <meta charset="utf-8"/>
          <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
          <script type='text/javascript' src='javascript.js'></script>
          <link rel='stylesheet' href='style.css' type='text/css'>
      <title>Title</title>
   </head>
   <body>
       <div class='hidden'></div>
       <div class='triggerOtherHover' onmouseover='hoverImplicitly();'></div>
       <div class='hidden'></div>
   </body>
  </html>

这是我的 style.css：

.hidden { 
          background-color:red;
          border: 1px solid black;
          opacity:0;
          transition: opacity 0.4s ease-in-out;
          width: 100px;
          height:100px;
 }
.hidden:hover, .visible {
          opacity:1;
}

.triggerOtherHover {
           width:100px;
           height:100px;
           background-color:green;
}

这是我的 javascript.js：

function hoverImplicitly {
           $(".hidden").toggleClass('visible');
}

当我将鼠标悬停在 div.triggerOtherHover 上时，其他两个具有 .hidden 类的 div 会因为不透明而变成红色，但是当我将鼠标从 div.triggeOtherHover 上移开时，这些 div仍然是红色的。我希望它们再次变得透明（不透明度：0）。有没有办法让它们表现得像 CSS :hover 伪类？

【问题讨论】：

标签： jquery css hover

【解决方案1】：

您还需要向 div 添加一个 mouseout 处理程序，以便在将焦点移出该类时将其删除。

   <div class="triggerOtherHover" onmouseover="hoverImplicitly();" onmouseout="hoverImplicitly();">

或者使用hover 伪事件将事件绑定到元素，而不是添加内联处理程序。

 $(function(){
    $('.triggerOtherHover').hover(hoverImplicitly); //hover represent mouseenter, mouseleave
});

另请注意，您在函数声明 function hoverImplicitly() 中缺少括号 ()

【讨论】：

是的，我在编写函数示例时忘记了括号。所以如果我使用第二种方式，我应该把 $(function(){ $('.triggerOtherHover').hover(hoverImplicitly); //hover represent mouseenter, mouseleave }); 放在哪里？抱歉，我是 JQuery 的新手。
@user3019105 你可以把它放在脚本标签内的head 或body 中。 <script>$(function(){ $('.triggerOtherHover').hover(hoverImplicitly);</script>
我在函数 hoverImplicitly() 定义之后把它放在了 javascript.js 文件中，但是它不起作用。问题出在哪里？
@user3019105 你可能缺少右括号.. 看这个演示jsbin.com/oxuPamAp/1/edit应该是$(function(){$('.triggerOtherHover').hover(hoverImplicitly);});
@user3019105 不客气。如果有帮助，您介意标记为答案吗？