Changing CSS image of sibling on hover

Question

I have a DIV with 9 images, and I would like to change the CSS property to 8 images, unlike the one that the user is hanging around. Here is what I have:
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 the Gallery at the bottom of the page after checking the age. Greetings here

Answer 1

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

-: 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, , , . , , true .