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

Question

HTML Code, CSS code, and Result

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

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

我尝试添加这个：

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

我的猜测是，.img_links的不透明度可能会覆盖使用.tooltip-text进行的不透明度的任何变化，因为它们是锚标记元素的一个元素？

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

Answer 1

您可以使用以下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不透明度，对工具提示没有影响。希望这可以帮到你;）

Answer 2

由于工具提示是.img_links的子项，如果降低.img_links的不透明度，工具提示永远不会比它的父级更不透明。

替换

.img_links:hover { opacity: .5 } 

与

.img_links img:hover { opacity: .5 } 

或者将工具提示移出img_links容器。