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%)");
}

Actual page

我正在寻找的最好的例子是年龄验证后页面底部的Gallery。 Here 干杯

Answer 1

我强烈建议不要使用内联JS。由于您已经在使用jQuery，因此您只需听取.hover() event（基本上是.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%)'
        });
    });
});

请参阅此处的概念验证小提琴：http://jsfiddle.net/teddyrised/5kw2hs7f/

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

唯一的问题是，只要父容器.gallery被悬停，我们就会将所有图像设置为灰度，这可能不是所需的行为。请参阅此处的小提琴：http://jsfiddle.net/teddyrised/88v8ga5z/

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

Answer 2

将其传递给函数以访问它们

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

在js

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%)");
}

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%)");
}

Answer 4

我对jQuery没有多少经验，但是如果尝试这个，我会在调用函数时，在悬停时传递当前元素的id。然后我会使用一个循环来运行图像，在这个循环中我会检查当前图像的id，如果为true则不会改变灰度。

在悬停时更改兄弟图像的CSS

4 个答案: