Javascript Jquery:Attaching"；每一个；对一个；关于；事件

我有一个结果列表，我使用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>

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

---

我尝试使用jQuery的each（），但无法理解如何在给定语法中使用它。

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

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

不能使用

$（'.ttl'）

，因为它引用了需要使用

$（e.currentTarget）.parent（）的所有
.ttl
元素。查找（'.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

使用JavaScript有什么原因吗？这可以很容易地用CSS实现

HTML:

---

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

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

---

检查此演示，查看不带JS的解决方案

---

$（'.ttl'）

选择所有

.ttl

元素，您认为它会如何工作？是否要将下一个

.ttl

元素着色？例如

$（this）.next（'.ttl'）

？$（this）将不起作用，因为我没有更改特定元素。我正在给它旁边的元素（标题）上色@是的。谢谢，成功了。如果这个问题听起来很愚蠢（已经被否决），我很抱歉，但我自己就是搞不懂。再次感谢。我已经更新了我的答案。OP，你的代码甚至不起作用。您需要删除结尾处的“.hoverbox”。我不知道它在那里做什么，但它肯定会破坏你的代码。@Mikey代码确实有效，我是根据。我必须使用此语法，因为内容是动态加载的。在

.hoverbox

元素中没有

.ttl

元素（为什么我删除了相同的答案）。最佳解决方案。不要使用js解决简单的CSS问题。当然它会。。。如果CSS因为z-index而无法访问它，JavaScript也应该无法…@Django你能附上你的问题的屏幕截图吗？@Django不确定我在这里找什么。。。也就是说，如果这是一个主题，他们很可能已经在使用CSS进行悬停。这意味着，如果您不使用比他们重的选择器链，您的选择器链将无法工作。确保添加

！重要提示

您旁边的CSS红色值。这样它将覆盖他们的CSS。@Django啊！我现在明白了。他们将锚定位在集装箱顶部。所以你能做的就是把

的悬停点放在锚和内容上。所以

.job\u listing:hover.job\u listing-title{color:red}

谢谢，但是“hoverbox”div有一些属性（position:absolute；z-index:999；）迫使我单独对其应用“hover”。我没有看到任何div.hoverbox，但它位于一个元素上。我已经添加了一些规则到hoverbox，你可以检查这是一个。hoverbox有什么用途？啊！非常感谢所有帮助过你的人。我很感激。

<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>

.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");
   },
   mouseleave: function () {
    $(this).css("color","inherit");
   }
});

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

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