4

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

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

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

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

有任何想法吗？

4

7 回答 7

4

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

$(".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; }
于 2012-11-29T12:32:11.433 回答
2

使用.not方法：

从匹配元素集中移除元素

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

你可以使用这个：

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

或这个：

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

或这个：

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

最后一个假设您在mouseoveror mousenter(or hover) 事件处理程序中。我也相信你必须在鼠标悬停时重置样式。工作演示：http: //jsfiddle.net/tt8cz/

于 2012-11-29T15:34:38.523 回答
0

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

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

乍一看，文档并没有提到这种可能性，但是第一批评论之一确实如此

于 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，但你当然可以使用任何属性。

JSF中。

于 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

我使用背景颜色参数制作了下一个示例。

$(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 回答