html - 在悬停时，如何同时更改单个 div 中的图像和文本的颜色？

Question

我希望这些图像和标题在悬停时改变颜色，但不是单独改变颜色，但是当单击文本图像时也应该改变颜色。不是背景，而是那些链接文本和图像的颜色/ 这是我的代码:

<div class="whitenavigation">
      <nav class="navicontext">
        <div class="navicon">
          <img src="img/Icons/1.PNG" alt="PROGRAMMES">
          <a class="caption" href="#">PROGRAMMES</a>
        </div>
        <div class="navicon">
          <img src="img/Icons/2%20.PNG" alt="Faculty">
          <a class="caption" href="#">FACULTY</a>
        </div>
        <div class="navicon">
          <img src="img/Icons/3%20.PNG" alt="Faculty">
          <a class="caption" href="#">RESEARCH</a>
        </div>
        <div class="navicon">
          <img src="img/Icons/4%20.PNG" alt="Faculty">
          <a class="caption" href="#">ABOUT US</a>
        </div>
        <div class="navicon">
          <img src="img/Icons/5%20.PNG" alt="Faculty">
          <a class="caption" href="#">ADMISSION</a>
        </div>
        <div class="navicon">
          <img src="img/Icons/6.PNG" alt="Faculty">
          <a class="caption" href="#">CONTACT US</a>
        </div>
      </nav>
    </div>

这是我已经应用并尝试获得结果的 css 代码。我在悬停时对文本和图像的颜色进行了不同的更改。对于图像，我使用了 css 的灰度属性。当我们将鼠标悬停在图像上时它会起作用，但对于文本我们必须单独悬停。我希望他们一次改变:

.whitenavigation{
     margin-left:auto;
     margin-right:auto;
     width:1080px;
     height: 100px;
     background-color: white;
}
 .navicon{
     vertical-align: top;
     display: inline-block;
     text-align: center;
     margin-top: 14px;
     margin-left: 50px;
}
 .navicon img{
     width:30px;
     height: 30px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.navicon img:hover{
    -webkit-filter: grayscale(100%);
    filter: grayscale(0%);
    cursor: pointer;
    }
 .caption {
     display: block;
     color: black;
}
 .navicon a:hover {
     color:#e96803;
}
 .navicontext{
     margin-top: 10px;
     float: right;
}`

Answer 1

您可以在 css 中使用 hover 轻松更改 div 的背景颜色。这是我所做的代码。

链接到 CodePen

.navicon{
  float:left;
  padding:5px;
  margin:5px;
  transition: 0.4s;
}

.navicon:hover{
  transition: 0.4s;
  background-color:orange;
}
.caption{
  display:block;
  text-align:center;
  text-decoration:none;
}

<div class="whitenavigation">
      <nav class="navicontext">
        <div class="navicon">
          <img src="https://cdn0.iconfinder.com/data/icons/elite-medical-science/512/blood-sample-512.png" alt="PROGRAMMES" width=150 >
          <a class="caption" href="#">PROGRAMMES</a>
        </div>
        <div class="navicon">
          <img src="https://cdn0.iconfinder.com/data/icons/elite-medical-science/512/blood-sample-512.png" alt="Faculty" width=150 >
          <a class="caption" href="#">FACULTY</a>
        </div>
        <div class="navicon">
          <img src="https://cdn0.iconfinder.com/data/icons/elite-medical-science/512/blood-sample-512.png" alt="Faculty" width=150 >
          <a class="caption" href="#">RESEARCH</a>
        </div>
        <div class="navicon">
          <img src="https://cdn0.iconfinder.com/data/icons/elite-medical-science/512/blood-sample-512.png" alt="Faculty" width=150 >
          <a class="caption" href="#">ABOUT US</a>
        </div>
        <div class="navicon">
          <img src="https://cdn0.iconfinder.com/data/icons/elite-medical-science/512/blood-sample-512.png" alt="Faculty" width=150 >
          <a class="caption" href="#">ADMISSION</a>
        </div>
        <div class="navicon">
          <img src="https://cdn0.iconfinder.com/data/icons/elite-medical-science/512/blood-sample-512.png" alt="Faculty" width=150 >
          <a class="caption" href="#">CONTACT US</a>
        </div>
      </nav>
    </div>