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

问题描述

我有一个元素列表，如

 < ol> 
< li class =blah>一些文字< a href =＃>测试< / a>< / li> 
< li class =blah> text< a href =＃>测试< / a>< / li> 
< li class =blah>一些文字< a href =＃>测试< / a>< / li> 
< li class =blah> text< a href =＃>测试< / a>< / li> 
< li class =blah>一些文字< a href =＃>测试< / a>< / li> 
< li class =blah> text< 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'）; 
}，function（）{ 
 jQuery（'ol li.blah a'）。removeClass（'hover-enabled'）; 
}）; 
  

它可以工作，但所有< a>项目盘旋 - 不仅仅是个人< li>任何想法？

解决方案

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

这是假设你希望类应用于 a 元素而不是 li 元素。

  jQuery醇锂）悬停（函数（）{
的jQuery（ A，这一点）.addClass。（启用悬停）; 
}，function（）{
 jQuery（a，this）.removeClass（'hover-enabled'）; 
}）; 
  

如果您希望 li 具有类然后使用：

$ p $ jQuery（'ol li'）。hover（function（）{
jQuery（this） .addClass（'hover-enabled'）;
}，function（）{
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屋！