javascript - 悬停时颜色变化

Question

我有一张图片列表，当我将鼠标悬停在一张图片上时，我希望其余图片变为黑色，而我要悬停的图片则保持其原始颜色。你能帮我做吗？

.inst__img {
  width: 11%;
  margin-left: 10%;
  display: inline-block;
}

.inst__img img {
  width: 100%
}

<section class="global__inst">
  <div class="inst__img">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt="">
    <span>vi</span>
  </div>
  <div class="inst__img">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt="">
    <span>vi</span>
  </div>
  <div class="inst__img">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt="">
    <span>vi</span>
  </div>
  <div class="inst__img">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt="">
    <span>vi</span>
  </div>
</section>

Answer 1

您需要为灰度选择未悬停的图像:img:not(:hover)

.inst__img {
    width: 11%;
    margin-left: 10%;
    display: inline-block;
}

.inst__img img{
    width: 100%;
}
.global__inst:hover img:not(:hover) {
    filter: grayscale(1);
    -webkit-filter: grayscale(1); 
}

<section class="global__inst">
  <div class="inst__img">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt="">
    <span>vi</span>
  </div>
  <div class="inst__img">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt="">
    <span>vi</span>
  </div>
  <div class="inst__img">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt="">
    <span>vi</span>
  </div>
  <div class="inst__img">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt="">
    <span>vi</span>
  </div>
</section>