在悬停元素时触发悬停效果覆盖另一个元素

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

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

添加与悬停伪类相同的 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');
    }
});

小提琴