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

Question

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

正如您在照片上看到的，在悬停状态下，link 和工具提示的不透明度均为 0.5。

我试着添加这个：

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

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

如有任何帮助，我们将不胜感激。谢谢

Answer 1

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

替换

.img_links:hover { opacity: .5 }

和

.img_links img:hover { opacity: .5 }

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

Answer 2

您可以使用以下 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，对工具提示没有任何影响。希望这可以帮助你 ;)

When hover on image, 0.5 opacity for link images and no opacity for tooltips