悬停时更改同级图像的CSS

Question

我有一个包含9张图片的DIV，我想改变8张图片的CSS属性，除了用户正在悬停的那一张。 这是我的代码：
HTML:

    <div class="gallery">
        <a href="#" class="gallerie-image"><img src="http://i.utdstc.com/icons/256/google-chrome-mac.png" class="image-hover" onmouseover="return hoverPics()" onmouseout="return changeMeBack()" /></a>
        <a href="#" class="gallerie-image"><img src="http://i.utdstc.com/icons/256/google-chrome-mac.png" class="image-hover" onmouseover="return hoverPics()" onmouseout="return changeMeBack()" /></a>
    </div>

JS:

function hoverPics() {
        $(".image-hover").css("filter", "gray").css("-webkit-filter", "grayscale(100%)");

        $(this).css("-webkit-filter", "grayscale(0%)");
}
function changeMeBack() {
        $(".image-hover").css("-webkit-filter", "grayscale(0%)");
}

实际页面

我正在寻找的最好的例子是年龄验证后页面底部的画廊。这里 干杯

- RUGZ

---

@devqon CSS的兄弟选择器只能选中后续的元素，不能选中之前出现的兄弟元素。 - Terry

你需要在 hoverPics() 中传递 this，并在函数内部使用它。查看这个 Fiddle。 - anpsmn

@Terry，你说得对，我不知道那个 :) - devqon

@anpsmn 非常感谢，它起作用了！ - RUGZ

Answer 1

我强烈建议不要使用内联JS。因为你已经在使用jQuery，你可以简单地监听.hover()事件(这基本上是.mouseenter()和.mouseleave()的简写)，然后使用DOM遍历方法:

$(function() {
    $('.image-hover').hover(function() {
        $(this).css({
            '-webkit-filter': 'grayscale(0%)'
        }).parent().siblings().find('.image-hover').css({
            '-webkit-filter': 'grayscale(100%)'
        });
    }, function() {
        $('.image-hover').css({
            '-webkit-filter': 'grayscale(0%)'
        });
    });
});

在这里查看概念验证fiddle：http://jsfiddle.net/teddyrised/5kw2hs7f/

---

还有一种纯CSS方法（略微hackier），虽然与jQuery解决方案相比，它允许更少的控制粒度。方法是将所有.image-hover设置为灰度，但仅允许在特定的.image-hover:hover上使用颜色。

唯一的问题是，只要父容器.gallery被悬停，我们就会将所有图像设置为灰度，这可能不是期望的行为。在这里查看fiddle：http://jsfiddle.net/teddyrised/88v8ga5z/

.gallery:hover .image-hover {
    -webkit-filter: grayscale(100%);
}
.gallery:hover .image-hover:hover {
    -webkit-filter: grayscale(0%);
}

- Terry

---

哇！看起来很新鲜，我会按照你提供的代码进行更改。到目前为止，我使用了@anpsmn的建议，现在它可以工作了。非常感谢！！ - RUGZ

Answer 2

将此函数传递以访问它们。

 onmouseover="return hoverPics(this)" onmouseout="return changeMeBack()"

在JavaScript中

function hoverPics(obj) {
        $(".image-hover").css("filter", "gray").css("-webkit-filter", "grayscale(100%)");

        $(obj).css("-webkit-filter", "grayscale(0%)");
}
function changeMeBack() {
        $(".image-hover").css("-webkit-filter", "grayscale(0%)");
}

- A.B

Answer 3

尝试验证是否悬停，像这样：

function hoverPics() {

    if( ! $('.image-hover').is(':hover') ) {
          $(".image-hover").css({ "filter": "gray", "-webkit-filter": "grayscale(100%)" });
    }
}
function changeMeBack() {
        $(".image-hover").css("-webkit-filter", "grayscale(0%)");
}

- Lugarini

Answer 4

我对jQuery的经验不是很丰富，但如果尝试这样做，我会在鼠标悬停时通过当前元素的id传递函数。然后，我会使用循环来遍历图片，在此循环中，我会检查id是否与当前图片相同，如果是，则不会改变灰度。

- hudsond7