Jquery执行基于元素'的父标记
Jquery execute action based on element's parent tag
我有以下内容:
<ul class="head clearfix">'
<li class=""><strong><a href="/firmy" class="menuTabs">Katalog firm <span>(3516)</span></a></strong></li>
<li class=""><a href="/produkty" class="menuTabs">Katalog produktów <span>(23752)</span></a></li>
<li class=""><a href="/uslugi" class="menuTabs">Katalog uslug <span>(81)</span></a></li>
<li class="last"><a href="/szkolenia" class="menuTabs">Katalog szkolen <span>(529)</span></a></li>
</ul>
我只需要在没有<strong>
标记作为父标记的链接上执行鼠标悬停效果。所以在上面的例子中,我会跳过"Katalog-firm"链接,因为那个链接有一个标记作为父链接。
感谢
您的css选择器将是
ul.header > li > a.menuTabs:hover
定义悬停效果
如果你需要一些jquery功能,你可以使用
$('ul.header > li > a.menuTabs')
以获得这些元素
只需从选择器中筛选出具有强标记的父元素,并附加鼠标事件:
$('ul.head li a').filter(function() {
return !$(this).parent().is('strong');
}).on('mouseenter', function() {
$(this).css('color','green');
});
FIDDLE
这只能通过使用直接子选择器>
在CSS中定义
ul.head > li > a.menuTabs:hover
{
/* hover style */
}
您可以在jquery 中使用相同的选择器
$('ul.head > li > a.menuTabs')
$('.head').on('click', 'li > a', function(evt) {
//do something
});
我建议,作为使用更具体的选择器(在大多数情况下可能是更好的选项)检查鼠标悬停事件中的父元素的替代方案:
$('a').on('mouseover', function(e){
var that = this;
if ($(that).parent().is('strong')) {
return false;
}
else {
// do stuff.
}
});
$('.head > li > .menuTabs').mouseover(fucnction () {
// code here
});
请这样使用。
ul li>a:hover
{
background-color:black;
}
相关文章:
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 如何使用javascript检查事件是否应用于元素
- 使用jQuery相对于元素的位置滑动元素
- Jquery执行基于元素'的父标记
- 将随机类应用于元素
- 循环使用CSS规则遍历数组,并将它们应用于元素
- 使用 JavaScript 动态地专注于元素
- 无法在无头模式下使用 watir Webdriver 执行按钮元素的 onclick 事件 javascript
- jQuery将侦听器应用于元素集
- 如何在 Javascript 中使用元素的 CSS 路径将 CSS 属性应用于元素
- 直接应用于元素的样式在移入 时将丢失.CSS 文件
- Rails 和特定于元素的 JavaScript
- 将预定义的颜色序列应用于元素的动态列表
- 使插件特定于元素
- Jquery toggleClass应用于元素时不起作用
- JavaScript获取当前应用于元素的样式列表
- 如何返回外部样式表类应用于元素的所有CSS属性(不获取计算样式!)
- jQuery事件侦听器,用于插入特定于元素的类
- JQuery选择器:当未单击某个子项时,将规则应用于元素
- jQuery.css()未应用于元素