通过更改不透明度突出显示图像(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>更多推荐
发布评论