消除<a>图像</a>上<a>标签上的</a>翻转行为

Question

我有以下一段功能良好的代码。

<div class="user-pic round-pic">
 <a href="<?php echo $userLoggedIn; ?>"><img src="<?php echo $user['profile_pic']; ?>"></a>
</div>

问题是它的外观。 当我将鼠标悬停在图像上以进行单击时，会得到这种奇怪的半透明渐变外观。

我知道这是一张愚蠢的照片，但我在当地工作。 这是此图片的CSS：

round-pic img {
width: 100%;
height: 100%;
object-fit: cover;
}

关于如何消除这种翻转行为的任何想法？ 像这样的小事情困扰着我，更不用说削弱了UX。

任何帮助，将不胜感激。

Answer 1

根据论坛的建议，我发现在main.css中设置了img:hover{opacity: 0.95} 。 我只是将<a>标记作为目标并使用内联来更改样式。

<a href="#" style="opacity: 1;"><img src="assets/images/profile_pics/blarg.jpeg"></a>

显然这不是一个大问题，但仍然需要纠正。