0

わかりました、jQueryを使用してdiv現在選択されているもの、ハイライトなどを特定し、それにコードを適用する方法を理解しようとしていdivます。

たとえば、3 つdivの が一列に並んでいます。それぞれdivに がclassあり.boxます。それぞれの中に のクラスを持つdiv別のものがあります。デフォルトでは に設定されていますが、それぞれの上にマウスを移動すると、そのオーバーレイのみが表示されるように設定されます。他のすべてのオーバーレイは非表示のままにする必要があります。 div.overlay.overlaydisplay: none;divdivdiv

http://jsfiddle.net/j76s2/をご覧ください。

マウスが s の上に置かれたときにオーバーレイを表示するように JS を持っていdivますが、マウスを任意の上に置くとすべてのオーバーレイが表示されますdiv。なぜそれが起こっているのかはわかっていますが、うまくいかないのは、マウスが上にあるdivときに最初のオーバーレイのみを表示するコードをうまく機能させる方法です。div

4

3 に答える 3

1

.hover()ホバリン用とホバアウト用の2つの関数を使用するイベントを使用できます。そして、this現在ホバーされている要素のコンテキストとして使用して、その中の.box要素を見つけ、.overlayそれを使用.hide()し.show()てその可視性を変更できます。

$(".box").hover(
    function(){$(this).find(".overlay").show()},
    function(){$(this).find(".overlay").hide()}
);

作業デモ： http： //jsfiddle.net/jfriend00/wa5Bn/

fadeIn()また、これを使用して好きになるかもしれませんfadeOut()：

$(".box").hover(
    function(){$(this).find(".overlay").stop(true, true).fadeIn(500)},
    function(){$(this).find(".overlay").stop(true, true).fadeOut(500)}
);​

作業デモ： http： //jsfiddle.net/jfriend00/4qeqm/

于 2012-09-23T00:08:23.707 に答える
1

this特定の要素を次のように参照するだけです。

$(".box").mouseover(function(){
    $(".overlay", this).css({"display" : "block"});
});

$(".box").mouseleave(function(){
    $(".overlay", this).css({"display" : "none"});
});

.boxこのようにして、ホバーされた要素内に含まれる要素に選択を絞り込みます。

また、の代わりに.hide()andを使用することを検討してください。.show().css()

于 2012-09-22T23:57:53.777 に答える
0

.overlayクラスを持つすべての要素の CSS を変更しています。現在マウスを置いているものだけに影響を与えるには、 を使用$(this)して現在の要素を選択し、find()その中に含まれるクラスを見つける必要があります。

$(".box").mouseover(function(){
    $(this).find(".overlay").css({"display" : "block"});
});

$(".box").mouseleave(function(){
    $(this).find(".overlay").css({"display" : "none"});
});

</p>

于 2012-09-22T23:58:52.793 に答える