1

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

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

但这不起作用。

有什么帮助吗？

4

3 回答 3

5

您不能使用 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')
});
于 2013-04-23T12:23:16.077 回答
4

嗯，你忘了.

$('.portfolio-item-hover-content').on('mouseover',function(){
        $('.portfolio-item-holder').trigger('mouseover');
});
于 2013-04-23T11:44:12.550 回答
1

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

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

于 2013-04-23T12:15:11.353 回答