Jquery：将 "each" 附加到 "on" 事件

Question

我有一个结果列表，我使用 jQuery 添加了一个悬停事件，所以标题会变成红色。

它工作得很好。

<li><a class="hoverbox"></a><h1 class="ttl">Result 1</h1></li>
<li><a class="hoverbox"></a><h1 class="ttl">Result 2</h1></li>
<li><a class="hoverbox"></a><h1 class="ttl">Result 3</h1></li>

$(document).on({
   mouseenter: function () {
    $('.ttl').css("color","red");
   },
   mouseleave: function () {
    $('.ttl').css("color","inherit");
   }
}, ".hoverbox");

问题是每当我将鼠标悬停在单个元素上时，所有元素都会变成红色。我只希望特定元素变红。

我尝试使用 jQuery 的 each()，但无法理解如何使用给定的语法来使用它。

Answer 1

您可以使用以下方法获得预期结果。

$('.ttl').on('mouseenter',function() {
    $(this).css("color","red");
    }).on('mouseleave',function() {
    $(this).css("color","inherit");
    });

Answer 2

您不能使用 $('.ttl') 因为它指的是您需要使用的所有 .ttl 元素 $(e.currentTarget).parent().find('.ttl') 到 select 当前 .ttl 元素:

$(document).on({
   mouseenter: function (e) {
    $(e.currentTarget).parent().find('.ttl').css("color","red");
   },
   mouseleave: function (e) {
    $(e.currentTarget).parent().find('.ttl').css("color","inherit");
   }
}, ".hoverbox");

然而，正如其他人所说，使用 CSS 优于使用 JS。

Answer 3

您需要使用 JavaScript 执行此操作吗？使用 CSS.

可以很容易地实现这一点

HTML:

<ul class="list">
    <li><a class="hoverbox"></a><h1 class="ttl">Result 1</h1></li>
    <li><a class="hoverbox"></a><h1 class="ttl">Result 2</h1></li>
    <li><a class="hoverbox"></a><h1 class="ttl">Result 3</h1></li>
</ul>

CSS:

.list > li:hover .ttl {
    color: red !important; // if you have to override an already applied theme (like wordpress) 
}

Answer 4

如果您想使用普通对象同时附加多个事件处理程序，则必须进行细微的更改。

$('.ttl').on({        
   mouseenter: function () {
    $(this).css("color","red");
   },
   mouseleave: function () {
    $(this).css("color","inherit");
   }
});

检查此 jsfiddle 以获得演示

Answer 5

没有JS的解决方案

https://jsfiddle.net/w4j5hsLh/3/

.hoverbox{
position:absolute;
z-index:999;
width:100%;
height:100%;
}
li{width:100px;height:100px;position:relative;}

li:hover > .ttl {
  color:red;
}

Jquery：将 "each" 附加到 "on" 事件

Jquery: Attaching "each" to an "on" event

javascript

each

jquery

events