javascript - 要素の親タグに基づくJquery実行アクション

Question

私は次のものを持っています：

<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>親としてタグを持たないリンクに対してのみ、マウスオーバー効果を実行する必要があります。したがって、上記の例では、「カタログ会社」リンクが親としてタグを持っているため、スキップします。

ありがとう

Answer 1

あなたのCSSセレクターは

ul.header > li > a.menuTabs:hover

ホバー効果を定義する

jqueryの機能が必要な場合は、使用できます

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

それらの要素を取得するには

Answer 2

セレクターから強いタグを持つ親を持つ要素をフィルターで除外し、マウスイベントをアタッチするだけです。

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

フィドル

Answer 3

これは、直接の子セレクターを使用することによってのみ CSS で定義できます。>

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

jqueryで同じセレクターを使用できます

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

Answer 4

このようにお使いください。

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

Answer 5

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

Answer 6

より具体的なセレクター (ほとんどの場合、おそらくより良いオプション) を使用する代わりに、mouseover イベントで親要素をチェックすることをお勧めします。

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

Answer 7

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