jQuery 悬停在 <li> [英] jQuery Hover on <li>

问题描述

我有一个元素列表，例如

<li class="blah">一些文本<a href=#">测试</a></li><li class="blah">一些文本<a href=#">测试</a></li><li class="blah">一些文本<a href=#">测试</a></li><li class="blah">一些文本<a href=#">测试</a></li><li class="blah">一些文本<a href=#">测试</a></li><li class="blah">一些文本<a href=#">测试</a></li><li class="blah">一些文本<a href=#">测试</a></li><ol>

我想添加一个悬停元素，这样当用户悬停在 <li>那么只有项目<a>悬停.

我有这个(启用悬停只是一种颜色)

jQuery('ol li').hover(function () {jQuery('ol li.blah a').addClass('hover-enabled');}， 功能 () {jQuery('ol li.blah a').removeClass('hover-enabled');});

它有效，但所有的 <a>项目悬停 - 不仅仅是个人 <li>.有什么想法吗?

解决方案

因为 ol li.blah a 选择器对于所有列表项 a 元素都是 true.

这是假设您希望将类应用于 a 元素而不是 li 元素.

jQuery('ol li').hover(function () {jQuery("a", this).addClass('hover-enabled');}， 功能 () {jQuery("a", this).removeClass('hover-enabled');});

如果您希望 li 拥有该类，请使用:

jQuery('ol li').hover(function () {jQuery(this).addClass('hover-enabled');}， 功能 () {jQuery(this).removeClass('hover-enabled');});

I have a list of elements like

<ol>
<li class="blah">some text <a href=#">test</a></li>
<li class="blah">some text <a href=#">test</a></li>
<li class="blah">some text <a href=#">test</a></li>
<li class="blah">some text <a href=#">test</a></li>
<li class="blah">some text <a href=#">test</a></li>
<li class="blah">some text <a href=#">test</a></li>
<li class="blah">some text <a href=#">test</a></li>
<ol>

I want to add a hover element so when the user hovers over the <li> then only that items <a> hovers.

I have this (where hover-enabled is just a color)

jQuery('ol li').hover(function () {
    jQuery('ol li.blah a').addClass('hover-enabled');
}, function () {
    jQuery('ol li.blah a').removeClass('hover-enabled');
});

It works but ALL of the <a> items hover - not just the individual <li>. Any ideas ?

解决方案

Because that ol li.blah a selector is true for all of the list items a elements.

This is assuming you want the class applied to the a element and not the li element.

jQuery('ol li').hover(function () {
    jQuery("a", this).addClass('hover-enabled');
}, function () {
    jQuery("a", this).removeClass('hover-enabled');
});

If you want the li to have the class then use:

jQuery('ol li').hover(function () {
    jQuery(this).addClass('hover-enabled');
}, function () {
    jQuery(this).removeClass('hover-enabled');
});

这篇关于jQuery 悬停在 &lt;li&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！