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>

Answer 2

使用此：

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

.inst__img img {
  width: 100%
}

.global__inst:hover .inst__img img {
  filter: grayscale(100%);
}

.inst__img:hover img {
  filter: none !important;
}

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

请尝试以下一项。最初，所有列表图像将为黑色，并且悬停可以根据需要显示

kafkastore.topic=_schemas_new

悬停时颜色变化

3 个答案: