Question

我在同一个类的页面上有十个元素。

当我将鼠标悬停在其中一个上面时，我想改变其他九个。

这是我到目前为止所拥有的......

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

有什么想法吗？

Answer 1

使用属性选择器按类选择有点多余（更不用说慢），因为有一个类选择器。试试这个：

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

如果要重置鼠标输出的效果，请使用带有两个功能参数的hover()。此外，在这种情况下使用类更好。

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

.foo { top: 10px; }

Answer 2

使用.not method：

从匹配元素集中删除元素

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

Answer 3

你可以使用这个：

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

或者这个：

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

或者这个：

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

最后一个假设您位于mouseover或mousenter（或hover）事件处理程序中。我也相信你必须在mouseout上重置样式。工作证明：http://jsfiddle.net/tt8cz/

Answer 4

您也可以使用.not方法，该方法也接受jQuery对象：

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

The docs乍一看没有提到这种可能性，但最初的评论之一

Answer 5

您也可以只使用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

Answer 6

如果我正确理解您要执行的操作，您只需更改.myClass的所有元素的样式，然后在this上更改它：

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

http://jsfiddle.net/hAMPA/

或者也可以像Rory McCrossan所建议的那样处理悬停状态。

Answer 7

我使用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"});
            }
        });
    });
});

jQuery：在悬停时选择给定类的所有元素，除此之外

7 个答案: