Question

尝试制作此内容（适用于首页）：

$(".text").not(".active a").hover(function(){

适用于加载ajaxify的元素。

尝试：

 $(document).on("hover",".text:not(.active a)",function(){

不起作用。

我错过了什么吗？

修改让我补充说，结构如下：

 <ul id="static-bar" class="nav navbar-nav navbar-right">
   <li class="active">
     <div data-hoverLeft="home" class="active-tail-top tail-and-point"></div>
     <div data-hoverLeft="home" class="active-tail-bottom tail-and-point"></div>
     <a id="home" class="text" href="index.html">HOME</a>
     <div data-hoverRight="home" class="active-point-top tail-and-point"></div>
     <div data-hoverRight="home" class="active-point-bottom tail-and-point"></div>
   </li>
   <li>
     <div data-hoverLeft="whatWeDo" class="tail-top-gray tail-and-point"></div>
     <div data-hoverLeft="whatWeDo" class="tail-bottom-gray tail-and-point"></div>
     <a id="whatWeDo" class="text" href="what-we-do.html">WHAT WE DO</a>
     <div data-hoverRight="whatWeDo" class="point-top-gray tail-and-point"></div>
     <div data-hoverRight="whatWeDo" class="point-bottom-gray tail-and-point"></div
   </li>
 </ul>

需要注意的重要事项是，当我在该特定页面上时，我应用了活动类。无论如何，每个链接使用一些CSS边界技巧获得尾部和点，当您将鼠标悬停在div标记上时，兄弟a的边框颜色会发生变化。当我使用$.hover()方法时，此悬停效果不会超过第一页，而当我使用$.on()时则不起作用。

Answer 1

尝试使用：

$(document).on("hover",".text:not(.active) a",function(){

根据您添加的HTML标记，您需要选择任何类text的锚点，该列位于<li>内，而不是active类：

$(document).on("mouseover","li:not(.active) a.text",function(){
    $(this).addClass('red');
}).on('mouseout', "li:not(.active) a.text",function(){
    $(this).removeClass('red');
});

<强> Fiddle Demo

Answer 2

试试这个：

$(document).on("mouseover","li:not(.active) a.text",function(){
  // your code goes here
});

转换当前函数以用于将来的元素

2 个答案: