将鼠标悬停在 div 上时移除图像灰度效果

Question

I'm making a sidebar and I want it so that when you hover over a specific div the image of that div will change the grayscale from 100% to 0%. Here's my current progress: https://jsfiddle.net/3j9zLokr/57/

<div class="example">
 <div class="a">
  <img src="https://sep.yimg.com/ay/filmandvideolighting/times-square-106-primary-red-lighting-gel-sheet-10x10-in-1.jpg" class="one" width="60" />
 </div>
 <div class="b">
  <img src="https://sep.yimg.com/ay/filmandvideolighting/times-square-106-primary-red-lighting-gel-sheet-10x10-in-1.jpg" class="two" width="60" />
 </div>
</div>

<style>

.one, .two {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  margin-left: 19px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.two {
  padding-top: 10px;
}

.one {
  padding-bottom: 5px;
}

.example {
  width: 100px;
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
}

.a {
  outline: 1px solid white;
}

</style>

Answer 1

just ad to your css this code

.one:hover {
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}

.two:hover {
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}

https://jsfiddle.net/q5pdemjh/1/

enjoy!

Answer 2

You could do something like this:

.one, .two {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  margin-left: 19px;
  padding-top: 10px;
  padding-bottom: 10px;
  transition: all 0.5s;
}

.one:hover, .two:hover {
  filter: grayscale(0);
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
}

The added transition: all 0.5s ensures that going from grayscale(100%) to grayscale(0) and back is smoothed over a 0.5s timeframe, whereas the :hover pseudoelement allows you to only trigger the change when you hover the divs with classes .one and .two .

Answer 3

You can use this code.

 .one, .two { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); margin-left: 19px; padding-top: 10px; padding-bottom: 10px; transition: all .5s ease; } .two { padding-top: 10px; } .one { padding-bottom: 5px; } .example { width: 100px; background-color: black; position: absolute; top: 0; left: 0; } .a:hover .one, .b:hover .two { -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ filter: grayscale(0%); }

 <div class="example"> <div class="a"> <img src="https://sep.yimg.com/ay/filmandvideolighting/times-square-106-primary-red-lighting-gel-sheet-10x10-in-1.jpg" class="one" width="60" /> </div> <div class="b"> <img src="https://sep.yimg.com/ay/filmandvideolighting/times-square-106-primary-red-lighting-gel-sheet-10x10-in-1.jpg" class="two" width="60" /> </div> </div>