悬停时颜色变化

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

请尝试以下。初始所有列表图像将是黑色的，悬停的图像可以随意显示

.inst__img{

  border:2px solid red;

        background: black; opacity:.5

}

.inst__img:hover{

  border:2px solid red;

        background: white;

    opacity:1

}