消除<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>

顯然這不是一個大問題，但仍然需要糾正。