4

同じクラスのページに10個の要素があります。

それらの1つにカーソルを合わせると、他の9つを変更したいと思います。

これが私がこれまでに持っているものです...

$("*[class='myClass']:not(this)").css({"top":"10px"});

何か案は？

4

7 に答える 7

4

クラスセレクターがあるため、属性セレクターを使用してクラスで選択するのは少し冗長です（遅いことは言うまでもありません）。これを試して：

$(".myClass").mouseover(function() {
    $('.myClass').not(this).css({"top":"10px"});
});

マウスアウトへの影響をリセットする場合はhover()、2つの関数パラメーターで使用します。また、この場合はクラスを使用することをお勧めします。

$(".myClass").hover(function() {
    $('.myClass').not(this).addClass('foo');
},
function() {
     $('.myClass').not(this).removeClass('foo');
});

.foo { top: 10px; }
于 2012-11-29T12:32:11.433 に答える
2

次のいずれかを使用できます。

$(".myClass:not(:hover)")

またはこれ：

$(".myClass").not(":hover")

またはこれ：

$(".myClass").not(this)

最後の1つは、mouseoverまたはmousenter（またはhover）イベントハンドラー内にいることを前提としています。また、mouseoutでスタイルをリセットする必要があると思います。実演デモ：http ：//jsfiddle.net/tt8cz/

于 2012-11-29T15:34:38.523 に答える
2

使用.not方法：

一致した要素のセットから要素を削除します

$("*[class='myClass']").not(this).css({"top":"10px"});
于 2012-11-29T12:32:30.133 に答える
0

.notjQueryオブジェクトを受け入れるメソッドも使用できます。

$('.myClass').not($(this)).css({"top":"10px"});

ドキュメントは一見この可能性について言及していませんが、最初のコメントの1つは言及しています

于 2012-11-29T12:34:28.950 に答える
0

CSSだけでこれを行うこともできます。

HTML：

<ol id="items">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ol>​

CSS：

#items:hover > li { padding-left:5px; }
#items:hover > li:hover { padding-left:0; }

私は使用しましpadding-leftたが、もちろんどのプロパティでも使用できます。

JSFiddle。

于 2012-11-29T12:36:11.757 に答える
0

あなたがやろうとしていることを正しく理解している場合は、のすべての要素のスタイルを.myClass変更してから、元に戻すことができthisます。

$('.myClass').hover(function() {
    $(".myClass").css({"background":"blue"});
    $(this).css({"background":"red"});
});​

http://jsfiddle.net/hAMPA/

または、Rory McCrossanが提案したように、ホバーアウト状態を処理します。

于 2012-11-29T12:36:34.910 に答える
0

次のサンプルは、background-colorパラメーターを使用して作成しました。

$(document).ready(function(e) {
    $('.myClass').live('mouseover',function(){
        var element = $(this);
        $(this).css({"background-color":"#FF0000"});
        $('.myClass').each(function(){
            if(element.html() != $(this).html()){
                $(this).css({"background-color":"#FFFFFF"});
            }
        });
    });
});
于 2012-11-29T13:07:08.853 に答える