ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryで同じマウスオーバーで2つの要素間を移動する問題の解決策

jQueryで同じマウスオーバーで2つの要素間を移動する問題の解決策

黄舟
リリース: 2017-06-28 14:12:55
オリジナル
1228 人が閲覧しました

jQuery

$('#d11,#d12').on('mouseover',function(){
                $('#d2').animate({opacity:'100'});
            });
ログイン後にコピー

で同じマウスオーバーで2つの要素間を移動する問題 コードにあるように、d11とd12の間を移動するとanimateがオブジェクトの点滅を実行します。詳細なコードは以下の通りです:


    
    Document
    
    
    
<script> $(document).ready(function(){ $(&amp;#39;#d11,#d12&amp;#39;).on(&amp;#39;mouseover&amp;#39;,function(){ $(&amp;#39;#d2&amp;#39;).animate({opacity:&amp;#39;100&amp;#39;}); }); $(&#39;#d11,#d12&#39;).on(&#39;mouseout&#39;,function(){ $(&#39;#d2&#39;).animate({opacity:&#39;0&#39;}); }); }); </script>
ログイン後にコピー
// 先终断之前的动画$(document).ready(function(){
    $(&#39;#d11,#d12&#39;).on(&#39;mouseover&#39;,function(){
        $(&#39;#d2&#39;).stop(true).animate({opacity:&#39;100&#39;});
    });
    $(&#39;#d11,#d12&#39;).on(&#39;mouseout&#39;,function(){
        $(&#39;#d2&#39;).stop(true).animate({opacity:&#39;0&#39;});
    });
});
ログイン後にコピー

方法1:

jsは必要ないのでCSSに文を追加します:

#d1:hover~#d2{opacity:1}
ログイン後にコピー

ただし、d1幅に注意する必要があります...

方法2:
Add新しいclass.opa1{opacity:1}を作成し、addClassとremoveClassで実行します。

アニメートする前にアニメーションを停止してください。または、カプセル化された .hover() を使用します

以上がjQueryで同じマウスオーバーで2つの要素間を移動する問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート