当悬停在一个元素上时，触发另一个元素的悬停效果。

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

查看我的代码片段： fiddle

- David Van Staden

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

fiddle

- Dmonix

Answer 2

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

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

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

祝您使用愉快 :)

- Michael Nguyen