3

****真実は、これらのソリューションはすべて機能しますが、プロジェクトでは機能しないため、少し異なる方法で質問を再提出します****

基本的に私は画像を持っています。誰かがその上にマウスカーソルを移動すると、div（画像が含まれています-別名再生ボタン）が表示されます。画像の外側にカーソルを移動すると、再生ボタンが消えます。

それは機能しますが、再生ボタンの上に呪いを動かすと、狂ったようにフリックするので、どういうわけか私のイベントを混乱させる必要があります。

助けてくれてありがとう...

HTML

<div id="cont">
    <div id="art"  style= "position: absolute; left: 20px; top: 40px;">
        <a href="#"><img src="http://www.newmusicproducer.com/img/ic_play.png"></a>
    </div>
    <img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" alt="smile" id="imgSmile"></img>

jQuery

$(document).ready(function() {
    $('#art').hide();             
    $('#imgSmile').mouseenter(function() {
        $('#art').show();
    });

    $('#imgSmile').mouseleave(function() {   
        $('#art').hide();
    });
});​

これがフィドルです

4

7 に答える 7

4

これと同じ効果は、CSS だけを使用して実現できます。

<div>
    <a href="#"><img src="http://www.newmusicproducer.com/img/ic_play.png"></a>
</div>

div
{
 background-image:url('https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275');
    width:100px;
    height:100px;
    position:relative;
}
div a
{
 position:absolute;
    top:20px;
    left:30px;
    display:none;
}
div:hover a
{
    display:block;
}

-- デモを見る --

編集:異なるリンク URL を持つ同じページでこれを複数回使用する必要がある場合に備えて、残りを適用するために少しの jQuery を使用して最小限の HTML を必要とするバージョンを作成しました:

<div class="play kirkbridge" data-playUrl="/myPlayUrl"></div>

http://jsfiddle.net/tW68d/16/

ただし、これは少しやり過ぎかもしれませんが、使用状況によって異なります。

于 2012-05-03T11:16:05.470 に答える
3

問題は、新しい画像にマウスを合わせると、元の画像にマウスアウトが発生することです。hover()代わりに、両方の要素をセレクターとして使用してみてください。

$(document).ready(function() {
    $('#art').hide();
    $('#imgSmile, #art').hover(
        function() {
            $('#art').show();
        }, function() {
            $('#art').hide();
        }
    );
});

更新されたフィドル

于 2012-05-03T11:08:37.113 に答える
1

別のアプローチは次のとおりです。

http://jsfiddle.net/aramk/ZqVZ6/1/

$(document).ready(function(){

    var art = $('#art');
    art.hide();
    var updatePlayButton = function() {
        if (art.is(':visible')) {
            art.hide();
        } else {
            art.show();
        }
    }

    $('#cont').hover(updatePlayButton);

});​

ボタンが笑顔の画像と重なってマウスがその上にあると、笑顔の画像からフォーカスが失われ、点滅し始めるため、ラッピングDIVを使用します。これはそれを回避します。

于 2012-05-03T11:17:22.710 に答える
1

可能であれば、CSSを使用して行うこともできます。

これがフィドルですhttp://jsfiddle.net/xasy4/

<div id="imgSmile">
     <div id="art">
        <a href="#"><img src="http://www.newmusicproducer.com/img/ic_play.png">
        </a>
     </div>
    </div>

css

 #imgSmile
{
    background: url('https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275') no-repeat center Transparent;
    width: 100px;
    height: 100px;
}
#imgSmile > #art
{
    position: absolute; left: 20px; top: 40px; opacity: 0;
}
#imgSmile:hover > #art
{
    position: absolute; left: 20px; top: 40px; opacity: 1;
}
于 2012-05-03T11:18:28.577 に答える
1

両方の要素をセレクターとして設定し、次のようなイベントチェッカーを使用するよりも、この.on()メソッドを使用できます。
(e)

デモjsBin

$(document).ready(function(){

    $('#art').hide();


    $('#imgSmile, #art').on('mouseenter mouseleave',function(e){
        if(e.type === 'mouseenter'){
            $('#art').show();
        }else{
            $('#art').hide();   
        }
    });

});

私が最も気に入っているのは、次のような三項演算子の使用です。

$('#imgSmile, #art').on('mouseenter mouseleave',function(e){
    var et = e.type === 'mouseenter' ? $('#art').show() :  $('#art').hide();  
});

内部演算子を使用したデモ

.toggle()正確なケースでは、次の方法だけを使用できます。

$('#imgSmile, #art').on('mouseenter mouseleave',function(e){
    $('#art').toggle(); 
});

.toggle（）を使用したデモ

于 2012-05-03T11:13:56.780 に答える
1

http://jsfiddle.net/jqkBx/1/

ホバー効果にCSSを使用しないのはなぜですか?

HTML

<div id="wrapper">
  <img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" alt="smile" id="imgSmile" />

  <div id="art" style="position: absolute; left: 20px; top: 40px;">
     <a href="#"><img src="http://www.newmusicproducer.com/img/ic_play.png" /></a>
  </div>
  </div>

CSS

#art{
    display:none;
}
#wrapper{
    width:100px;
    height:100px;        
}
#wrapper:hover #art{
    display:block;        
}

</p>

于 2012-05-03T11:20:29.807 に答える
0 
$(document).ready(function() {
    $('#art').hide();             
    $('#imgSmile').mouseenter(function() {
        $('#art').show();
    });
$('#art').mouseenter(function() {
        $('#art').show();
    });
    $('#imgSmile').mouseleave(function() {   
        $('#art').hide();
    });
});​

#artマウス入力イベントを追加するだけです

于 2012-05-03T11:17:07.353 に答える