在Hover中，如何同时更改单个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>

这是我已经应用并试图获得reslts的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中使用悬停来轻松更改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>

Answer 2

在父元素悬停时更改css

.navicon:hover img{
-webkit-filter: grayscale(100%);
filter: grayscale(0%);
cursor: pointer;
}
.navicon:hover a {
color:#e96803;
}

.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:hover img{
-webkit-filter: grayscale(100%);
filter: grayscale(0%);
cursor: pointer;
}
.caption {
display: block;
color: black;
}
.navicon:hover a {
color:#e96803;
}
.navicontext{
margin-top: 10px;
float: right;
}

<div class="whitenavigation">
<nav class="navicontext">
<div class="navicon">
<img src="https://img.icons8.com/color/64/000000/name.png">
<a class="caption" href="#">PROGRAMMES</a>
</div>
<div class="navicon">
<img src="https://img.icons8.com/color/48/000000/edit.png">
<a class="caption" href="#">FACULTY</a>
</div>
<div class="navicon">
<img src="https://img.icons8.com/color/48/000000/synchronize.png">
<a class="caption" href="#">RESEARCH</a>
</div>
<div class="navicon">
<img src="https://img.icons8.com/color/48/000000/picture.png">
<a class="caption" href="#">ABOUT US</a>
</div>
<div class="navicon">
<img src="https://img.icons8.com/color/48/000000/opened-folder.png">
<a class="caption" href="#">ADMISSION</a>
</div>
<div class="navicon">
<img src="https://img.icons8.com/color/48/000000/services.png">
<a class="caption" href="#">CONTACT US</a>
</div>
</nav>
</div>

Answer 3

在CSS文件中使用它。这应该工作

.navicon, caption: hover{
// your color changing CSS
}