Question

我有一些麻烦要弄清楚如何将鼠标悬停在具有绝对href链接的图像上。我不想把一切都放在链接里面。我想要实现的是当我将鼠标悬停在块上时，图像会改变状态，即亮度滤镜或不透明度。

这是我的HTML

<li class="class--item class--item-1">
  <a href="#" class="class--link">Som text here</a>

  <div class="media__overlay media__img">
     <div class="img--class">
        <img src="img/img.jpg" alt="img">
        <div class="class-title">
           <h1 class="media__title">Some text here</h1>
        </div>
     </div>
  </div>
</li>

我如何选择img麻烦的位置：绝对的链接？我可以这样做吗？

由于

Answer 1

在悬停链接时选择带有CSS的IMG：

a:hover + * img {
    /* properties to style the image, here */
}

IMG是该链接的下一个兄弟的后代。

+是下一个兄弟选择器（选择此元素的下一个孩子的父母）。

*表示＆＃39;任何元素，无论它是什么＆＃39;。

分隔* img的空格表示其中的IMG元素。

Answer 2

您可以使用以下方法：

li img{
  opacity:0.6;
}
li:hover img{
  opacity:1;
}

li{
width:200px;
height:100px;
background:#eee;
overflow:hidden;
text-align:center;
}

<li class="class--item class--item-1"> 
<a href="#" class="class--link">Som text here</a>
 <div class="media__overlay media__img"> 
	<div class="img--class"> 
		<img src="img/img.jpg" alt="img"> 
		<div class="class-title"> 
			<h1 class="media__title">Some text here</h1> 
		</div> 
	</div> 
 </div> 
</li>

如何使用绝对href

2 个答案: