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

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

Answer 2

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

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

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

享受：）

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

2 个答案: