Question

我有一个结果列表，我使用jQuery为它添加了 hover 事件，因此标题将显示为红色。

它运作得很好。

<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

您是否有理由使用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 2

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

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

Answer 3

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

Answer 4

您无法使用$('.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 。

Answer 5

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

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

选中此jsfiddle进行演示

Jquery：将“each”附加到“on”事件

5 个答案: