1

これは私が持っているhtmlです:

<div id="social">
    <a href="#" class="twitter"><span class="text">Twitter</span></a>
</div>

私がやろうとしているのは、最初に span.text を非表示にし、div の背景にある画像にカーソルを合わせるとです。これは私のcssです

#social a {
    display:inline-block;
    overflow:hidden;
    padding:4px 0 0 28px;
/* left padding is for the bg image to be visible*/
}
#social a span {
    display:none;
}
#social .twitter {
    background:url(../images/social/twitter.png) no-repeat left top;
}
#social .twitter:hover {
    background:url(../images/social/twitter_hover.png) no-repeat left top;
}

そして、これは私のjsです:

$("#social a.twitter").mouseover(function(){
  $("span",this).show("slow");
}).mouseout(function(){
  $("span",this).hide("slow");
});

しかし、画像にカーソルを合わせると、テキストが表示されたり非表示になったりします..どこが間違っていますか?

4

4 に答える 4

3

非常に一般的な問題があります。スパンが表示されると、マウスはaを超えないため、mouseoutイベントが呼び出されます。

これを修正するには、mouseenterイベントとmouseleaveイベントを使用します

$("#social a.twitter").mouseenter(function(){
  $("span",this).show("slow");
}).mouseleave(function(){
  $("span",this).hide("slow");
});​

あなたのためのフィドル：D

そして、cssでは、コメントはあり、/* */ありません//

于 2012-06-21T02:30:05.087 に答える
1

あなたのCSSで：

// left padding is for the bg image to be visible

//コメントの有効な記号ではありません。

/* */次のようにラップする必要があります。

/* left padding is for the bg image to be visible */
于 2012-06-21T02:25:12.173 に答える
0

この効果のために JavaScript を使用する必要はありません (使用すべきではありません)。よりクリーンでよりセマンティックなCSSでそれを行うことができます:)。例：

​a.twitter {
    display: block;
    width: 300px;
    height: 300px;
    background: url('http://www.simplyzesty.com/wp-content/uploads/2012/01/twitter_newbird_boxed_whiteonblue2.png');
}

a.twitter span {
    opacity: 0;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

a.twitter:hover span {
    opacity: 1;
}

jsFiddle: http://jsfiddle.net/Ut4Gx/

于 2012-06-21T02:32:34.543 に答える
0

mouseleaveを使用してみてください。マウスアウトについて:

このイベント タイプは、イベント バブリングが原因で多くの問題を引き起こす可能性があります。たとえば、この例では、マウス ポインターが Inner 要素の外に移動すると、mouseout イベントがそこに送信され、その後 Outer まで細流します。これにより、不適切なタイミングでバインドされた mouseout ハンドラーがトリガーされる可能性があります。便利な代替手段については、.mouseleave() の説明を参照してください。

于 2012-06-21T02:34:51.947 に答える