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

有没有办法触发两个元素悬停在另一个与JQuery徘徊？如何在使用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：悬停伪类？

来源

2013-12-23 tonix

你需要一个mouseout处理程序添加到div一样，所以，当集中出它的类被删除。

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

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

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

另外请注意，你缺少的函数声明function hoverImplicitly()

来源

2013-12-23 22:28:42 PSL

是的，我忘了括号，而写函数的例子括号()。所以如果我使用第二种方式，我应该在哪里放置'$（function（）{（'。triggerOtherHover'）。hover（hoverImplicitly）; //悬停表示mouseenter，mouseleave }）;'？对不起，但我是JQuery的新手。 – tonix

@ user3019105你可以将它放在脚本标签内的'head'或'body'中。 '' – PSL

我把它放在javascript.js文件中的函数后hoverImplicitly（）的定义，但它没有工作在哪里问题？ – tonix

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

回答

相关问题