基於jQuery元素的父標籤

執行行動我有以下幾點：基於jQuery元素的父標籤

<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公司」鏈接，因爲該鏈接有一個標籤作爲父項。

感謝

來源

2012-08-01 ShaneKm

就過濾掉了來自選擇的強標籤的父元素和附加鼠標事件：

$('ul.head li a').filter(function() { 
    return !$(this).parent().is('strong'); 
}).on('mouseenter', function() { 
    $(this).css('color','green'); 
});

FIDDLE

來源

2012-08-01 09:54:46 adeneo

這可能在CSS中僅使用直接孩子選擇>

ul.head > li > a.menuTabs:hover 
{ 
    /* hover style */ 
}

定義

您可以在jQuery中使用相同的選擇

$('ul.head > li > a.menuTabs')

來源

2012-08-01 09:49:26 DanielB

你的CSS選擇器會

ul.header > li > a.menuTabs:hover

定義懸停效果

如果你需要一些jQuery的functionallity，您可以使用

$('ul.header > li > a.menuTabs')

得到這些元素

來源

2012-08-01 09:50:01

$('.head').on('click', 'li > a', function(evt) { 
    //do something 
});

來源

2012-08-01 09:50:15 Utkanos

我建議，作爲替代使用更具體的選擇器（在大多數情況下可能是更好的選擇）檢查mouseover事件中的父元素：

$('a').on('mouseover', function(e){ 
    var that = this; 
    if ($(that).parent().is('strong')) { 
     return false; 
    } 
    else { 
     // do stuff. 
    } 
});

來源

2012-08-01 09:50:33

$('.head > li > .menuTabs').mouseover(fucnction() { 
    // code here 
});

來源

2012-08-01 09:50:48

請使用這個樣子。

ul li>a:hover 
{ 
background-color:black; 
}

來源

2012-08-01 09:56:58

基於jQuery元素的父標籤

回答

相關問題