jquery - 悬停元素时触发另一个元素上的悬停效果

Question

我遇到了这个问题：当实际上将鼠标悬停在 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');
            });

看我的小提琴

Answer 1

我有解决您的问题的方法。

添加与 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');
    }
});

小提琴

Answer 2

您可以使用多个 jQuery 事件处理程序：

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

工作示例：http: //jsfiddle.net/7L4WZ/169/

请享用 ：）