Html 悬停另一个元素时的图像转换

我有一个学校的项目要执行，我不知道如何在CSS中淡出一个图像，同时在同一页面中的另一个元素（锚元素）上悬停

我当前使用的方法是：target和not（：target）选择器。基本上一张图像在被瞄准时会褪色

.home > img 
{
  opacity: 0;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease
}

.home > img:target  {opacity: 1;}
.home > img:not(:target) {opacity: 0;}

---

但我相信有一种方法可以通过悬停来实现这一点。

如果锚定和图像在HTML中相邻，您可以执行以下操作：

.home a + .home img{
    opacity: 0;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease
}
.home a:hover + .home img{
    opacity:1;
}

但是HTML应该如下所示：

<div class="home">
    <a href="#">Item</a>
    <img src="whatever.jpg">
</div>

opacity:0和opacity:1之间的延迟。我现在尝试一下，但是有两个图像，一个图像的不透明度必须为0，而另一个图像的不透明度必须为1，问题是：不选择或您的意思是您需要这种效果只在其中一个图像中发生吗？然后使用一个类。如果多个图像必须以相反的方式工作，请使用两个类并在其中一个类中切换不透明度。2个链接，2个图像。如果单击该特定链接，则该特定图像将淡入而另一个淡出，反之亦然。我现在明白了，我想这是没有JS你能得到的最好的了。你必须使用标签，而不是链接。