[英]Eliminate Rollover Behavior on <a> tag over an image
I have the following piece of code that functionally works well. 我有以下一段功能良好的代码。
<div class="user-pic round-pic">
<a href="<?php echo $userLoggedIn; ?>"><img src="<?php echo $user['profile_pic']; ?>"></a>
</div>
The problem is how it looks. 问题是它的外观。 When I rollover the image to click, I get this weird half transparent gradient look.
当我将鼠标悬停在图像上以进行单击时,会得到这种奇怪的半透明渐变外观。
I know it's a stupid pic but I'm working locally. 我知道这是一张愚蠢的照片,但我在当地工作。 Here is the CSS for this pic:
这是此图片的CSS:
round-pic img {
width: 100%;
height: 100%;
object-fit: cover;
}
Any thoughts on how I could eliminate this rollover behavior? 关于如何消除这种翻转行为的任何想法? Little things like this bother me not to mention detract from the UX.
像这样的小事情困扰着我,更不用说削弱了UX。
Any help would be appreciated. 任何帮助,将不胜感激。
Based on a forum suggestion I discovered img:hover{opacity: 0.95}
was set in main.css. 根据论坛的建议,我发现在main.css中设置了
img:hover{opacity: 0.95}
。 I simply targeted the <a>
tag and used inline to change the style. 我只是将
<a>
标记作为目标并使用内联来更改样式。
<a href="#" style="opacity: 1;"><img src="assets/images/profile_pics/blarg.jpeg"></a>
Not a huge issue obviously, but needed to be corrected nonetheless. 显然这不是一个大问题,但仍然需要纠正。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.