Jquery:附加“;每个“;到“;关于“;事件

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

本文关键字：关于 事件 每个 Jquery 附加      更新时间：2023-09-26

我有一个结果列表，我使用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（），但无法理解如何使用给定的语法。

您需要使用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) 
}

您可以使用以下内容来获得预期的结果。

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

没有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;
}

不能使用$('.ttl')，因为它引用了所有.ttl元素，您需要使用$(e.currentTarget).parent().find('.ttl')来选择当前.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。

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

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

检查这个jsfiddle的演示

相关文章：