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

I have a DIV with 9 images and I would like to change CSS property of 8 images unlike one that user is hovering. Here is what I have:
HTML:

我有一个有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

The best example of what I'm looking for is Gallery at the bottom of the page after age validation. Here Cheers

实际页面我要找的最好的例子是经过年龄验证的页面底部的图库。在这里欢呼

4 个解决方案

#1

I strongly recommend against using inline JS. Since you're already using jQuery, you can simply listen to the .hover() event (which is basically a shorthand for .mouseenter() and .mouseleave()), and use DOM traversal methods:

我强烈建议不要使用内联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%)'
        });
    });
});

See proof-of-concept fiddle here: http://jsfiddle.net/teddyrised/5kw2hs7f/

请参见这里的概念验证:http://jsfiddle.net/teddyrised/5kw2hs7f/。

There is also a pure CSS method (slightly hackier), although it allows less granularity over control compared to the jQuery solution. The way is to set all .image-hover to grayscale, but only allow colour on the specific .image-hover:hover.

还有一种纯粹的CSS方法(稍显笨拙)，尽管与jQuery解决方案相比，它允许更少的控制粒度。方法是将所有.image-hover设置为灰度，但只允许在特定的.image-hover:上显示颜色。

The only problem is that we are setting all images to greyscale as long as the parent container .gallery is hovered upon, and this might not be the desired behavior. See fiddle here: http://jsfiddle.net/teddyrised/88v8ga5z/

唯一的问题是，只要父容器.gallery被悬置在上面，我们就可以将所有图像设置为灰度级，这可能不是我们想要的行为。看到小提琴:http://jsfiddle.net/teddyrised/88v8ga5z/

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

#2

Pass this in function to access them

传递这个函数来访问它们

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

in js

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

#3

try to verify if is hover, like this:

尝试验证是否处于悬停状态，如下所示:

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

#4

I do not have much experience with jQuery however if attempting this I would pass through the id of the current element when the function is called, on hover. I would then use a loop to run through the images, within this loop I would check the id against the current image and if true would not change the grey scale.

我对jQuery并没有太多的经验，但是如果尝试这一点，当函数被调用时，我将通过当前元素的id。然后我将使用一个循环来运行图像，在这个循环中，我将针对当前的图像检查id，如果为真，则不会改变灰度。

#1