CODEWITHSUNDEEP
javascriptjquerycsseventsmousehover
RUGZ
RUGZ

Reputation: 75

Change CSS of sibling image on hover

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:

    <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

Upvotes: 4

Views: 535

Answers (4)

hudsond7
hudsond7

Reputation: 706

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.

Upvotes: 0

Terry
Terry

Reputation: 66123

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:

$(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/

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.

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:hover .image-hover {
    -webkit-filter: grayscale(100%);
}
.gallery:hover .image-hover:hover {
    -webkit-filter: grayscale(0%);
}

Upvotes: 2

A.B
A.B

Reputation: 20445

Pass this in function to access them 

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

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

Upvotes: 1

Lugarini
Lugarini

Reputation: 802

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

Upvotes: 0

Related Questions