Highlight an image by changing opacity

问题

I have a set of images. Whenever i hover over one i want it to be highlighted by reducing the opacity of the other images. So the image which have the cursor over it will keep its color. I tried it with the below code but it didn't work. What am i doing wrong?

HTML:

<div id="first">
<img id="image1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image2" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image3" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image4" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image5" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image6" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image7" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image8" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image9" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image10"src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
</div>

CSS:

#first:hover img
{                            /* PARENT HOVER */
    opacity:0.4;  
    cursor: pointer;                    /* Dim all */
}    
#first img:hover
{                            /* SINGLE HOVER */
    opacity: 1;                /* Max one */
    color:#000000;
    cursor: pointer; 
}

回答1:

You can do it through jQuery. Jquery is required for the below code.

<script>
    jQuery(function($) {
        $('#first img').hover(function() { // on mouseover
            $('#first img').css({'opacity':0.4}); // you can animate this as well
            $(this).css({'opacity':1});
        }, function() { // on mouseout
            $('#first img').css({'opacity':1});
        });
    });
</script>

回答2:

@Randy in your code,if i will hover on empty space or anywhere then it will behave like hovering on all so please check my code and let me know if it is according to your need..

In my code you will see that if you will take mouse in gap between li, still it will work..Hope i got your issue or else let me know if there is any other issue..

Thank you...

Find Here

Code

来源：https://stackoverflow.com/questions/30886248/highlight-an-image-by-changing-opacity

标签

html

css