通过更改不透明度突出显示图像(Highlight an image by changing opacity)

通过更改不透明度突出显示图像(Highlight an image by changing opacity)

我有一组图像。 每当我将鼠标悬停在一个上面时，我希望通过降低其他图像的不透明度来突出显示它。 因此，将光标放在其上的图像将保持其颜色。 我尝试使用下面的代码，但它没有用。 我究竟做错了什么？

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; }

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; }

最满意答案

你可以通过jQuery来做到这一点。 以下代码需要Jquery。

<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>

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>