5

私はこれに問題があります: h3 要素の上にホバーしているときに、画像の上にホバー機能を強制したい

html:

<p><a><img class="size-full wp-image-1236 alignleft" alt="phone-icon-red" src="..." width="50" height="50" /></a></p>
<h3>Contact Us</h3>

CSS:

img:hover{
    margin-left: 10px;
}

js:

$('h3').hover(function(e){
                e.preventDefault();
                $(this).prev('p').find('img').trigger('mouseover');
            });

私のフィドルを参照してください

4

2 に答える 2

4

あなたの問題の回避策があります。

hover 疑似クラスと同じ img クラスを追加します。

img:hover, img.hover{
    margin-left: 10px;
}

mouseover および mouseout イベントを h3 要素にバインドします。

$('h3').on({
    'mouseover': function() {
        $(this).prev('p').find('img').addClass('hover');
    },
    'mouseout': function() {
        $(this).prev('p').find('img').removeClass('hover');
    }
});

フィドル

于 2013-04-04T10:33:19.400 に答える
2

複数の jQuery イベント ハンドラーを使用できます。

$("h3").on({
    mouseenter: function(){
        $('img').addClass('imgHoverClass');
    },
    mouseout: function(){
        $('img').removeClass('imgHoverClass');    
    }
});

作業例: http://jsfiddle.net/7L4WZ/169/

楽しい ：）

于 2013-04-04T10:46:19.623 に答える