html - 当悬停在图像上时，链接图像的不透明度为 0.5，工具提示没有不透明度

我想要链接在悬停状态下的行为，链接的不透明度为 0.5，然后工具提示将出现，但不透明度为 1。

正如您在照片上看到的，当处于悬停状态时，链接和工具提示的不透明度均为 0.5。

我尝试添加这个:

.tooltip-text:hover{opacity: 1;}

我的猜测是，也许 .img_links 的不透明度会覆盖使用 .tooltip-text 所做的任何不透明度更改，因为它们是 anchor 标记元素的一个元素？

任何帮助将不胜感激。谢谢。

最佳答案

您可以使用以下 CSS:

.img_links:hover > img {
    opacity: 0.5;
}

替换:

.img_links:hover .tooptip-text {
    visibility: visible;
    opacity: 1;
}

.img_links:hover {
    opacity: 0.5;
}

当您的鼠标位于图像或工具提示上时，图像的不透明度仍为 0.5，对工具提示没有影响。希望这对你有帮助；)

关于html - 当悬停在图像上时，链接图像的不透明度为 0.5，工具提示没有不透明度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35680263/

相关文章：

css - Chrome/Opera 中的边界半径和溢出(悬停时)