將鼠標懸停在 div 上時移除圖像灰度效果

Question

我正在制作一個側邊欄，我想要它，以便當您將鼠標懸停在特定 div 上時，該 div 的圖像會將灰度從 100% 更改為 0%。 這是我目前的進展： 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

只需將此代碼添加到您的 css 中

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

請享用！

Answer 2

你可以這樣做：

.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 */
}

添加的transition: all 0.5s確保在 0.5 秒的時間范圍內從grayscale(100%)到grayscale(0)並返回平滑，而:hover偽元素允許您僅在將 div 與類懸停時觸發更改.one和.two 。

Answer 3

您可以使用此代碼。

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