Question

当我将鼠标悬停在另一个元素上时，我想强制悬停效果：

<div class="portfolio-item-holder">
   <div class="portfolio-item-hover-content"></div>
</div>


$('portfolio-item-hover-content').on('mouseover',function(){
        $('portfolio-item-holder').trigger('mouseover');
});

但这不起作用。

任何帮助？

Answer 1

您无法使用jQuery设置悬停样式。我建议在你的css中创建一个悬停类，并使用addClass：

来应用它

<强> CSS：

.portfolio-item-holder:hover,
.portfolio-item-holder.hover {
    // these styles will be applied when naturally hovered
    // and when elements with the class "portfolio-item-holder"
    // also have the class "hover"
}

<强>使用Javascript：

$('.portfolio-item-hover-content').on('mouseenter', function(){
    $('.portfolio-item-holder').addClass('hover')
});

你可以在mouseleave上删除它：

$('.portfolio-item-hover-content').on('mouseleave', function(){
    $('.portfolio-item-holder').removeClass('hover')
});

Answer 2

嗯，你忘记了.

$('.portfolio-item-hover-content').on('mouseover',function(){
        $('.portfolio-item-holder').trigger('mouseover');
});

Answer 3

hover不会将处理程序绑定到mouseover/mouseout，而是将它们绑定到mouseenter/mouseleave。

您可以触发正确的事件：http://jsfiddle.net/FCxfR/26/

请注意，您可能会观察到动画的奇怪行为（mouseover/mouseout和mouseenter/mouseleave表现不同 - 请参阅每个文档页面末尾的示例）

查看该插件是否允许您执行所需操作（在其他元素上触发动画）。

否则，你可以通过寻找动画html的代码片段来破解你的方式，而不是使用他们的框架，手动将这两个函数绑定为父节点上mouseenter/mouseleave的处理程序。

你还需要相应地更新css，按照以下方式更新：

 //rules applying to
 .portfolio-item-hover-content:hover
 //should be replaced with rules applying to
 .portfolio-item-holder:hover .portfolio-item-hover-content

不言而喻：您将是唯一一个知道这是否会破坏页面其余部分插件行为的人......

强制鼠标悬停/悬停对元素的影响

3 个答案: