Question

我有一个学校项目要执行，我没有关于如何在CSS中淡化图像同时将鼠标悬停在同一页面内的另一个元素（锚元素）上的想法。

我正在使用的当前方法是：target而不是（：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;}

但我确信有一种方法可以通过悬停来实现这一目标。

Answer 1

如果锚点和图像在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>

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

1 个答案: