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

【问题标题】：When hover on image, 0.5 opacity for link images and no opacity for tooltips悬停在图像上时，链接图像不透明度为 0.5，工具提示不透明度
【发布时间】：2016-02-28 08:19:07
【问题描述】：

HTML Code, CSS code, and Result

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

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

我尝试添加这个：

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

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

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

【问题讨论】：

你能把相关代码粘贴到这里，而不是在屏幕截图中显示吗？首选 stacksn-p。
你可以为你的问题创建一个 jsfiddle 吗？

标签： html css hover tooltip

【解决方案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，对工具提示没有影响。希望这可以帮助你;)

【讨论】：

但是 .tooltip-text 将不可见，因为它被声明为隐藏。我在没有替换 .img_links:hover .tooptip-text { visibility: visible; 的情况下尝试了您的代码不透明度：1；并且它起作用了。谢谢。
哦，我不知道您之前隐藏了工具提示文本：p 很高兴您解决了问题！

【解决方案2】：

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

替换

.img_links:hover { opacity: .5 }

与

.img_links img:hover { opacity: .5 }

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

【讨论】：