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

hovermouseover/mouseoutハンドラをにバインドするのではなく、 にバインドしますmouseenter/mouseleave。

正しいイベントをトリガーできます: http://jsfiddle.net/FCxfR/26/

mouseover/mouseoutアニメーションで奇妙な動作が見られる場合があることに注意してください (mouseenter/mouseleave動作が異なります - 各ドキュメントのページの最後にある例を参照してください)。

プラグインで目的の操作ができないかどうかを確認します (他の要素でアニメーションをトリガーします)。

それ以外の場合は、html をアニメーション化するコード スニペットを探してハッキングし、フレームワークを使用する代わりに、これら 2 つの関数を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 に答える