为什么我的 CSS 不透明度过渡不起作用？

如何解决为什么我的 CSS 不透明度过渡不起作用？

我刚开始学习 CSS，遇到了工具提示不透明度过渡的问题。我做了一个例子，只包含适用于这个问题的代码。我创建了一些工具提示，并希望为工具提示的某些变体添加不透明度过渡，但我无法使其正常工作。

当悬停文本时，可见性触发良好，但是当向控制悬停不透明度的元素添加第二个类时，没有任何反应，我尝试重写它以仅使用一个类，但产生了相同的结果。从我发现和阅读的所有文档来看，这应该是有效的，所以我被踩到了。

如果您有任何解决此问题的建议，我们将不胜感激。

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  text-align: center;
}

.tooltip_content{
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: orangered;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
}

#tooltip_content_demo_8{
  position: absolute;
  z-index: 1;
  top: -10px;
  left: 105%;
  opacity: 0.1;
  transition: opacity 1s;
}

#tooltip_content_demo_8::after{
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

.tooltip:hover .tooltip_content{
  visibility: visible;
}
.tooltip:hover .tooltip_content_styled{
  opacity: 1;
}

</style>



<body style="text-align:center;">

<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below,the tooltip text will fade in and take 1 second to go from nearly invisible to visible.</p>

<div class="tooltip" id="tooltip_demo_8">Hover over me to tooltip
<span class="tooltip_content tooltip_content_styled" id="tooltip_content_demo_8">This is the tooltip text content</span>
</div><br/>

</body>
</html>

解决方法

ID 选择器总是以类为主导。因此，必须添加特殊条件 !important 才能使 opacity: 1 起作用。下面是一个例子。

body {
  text-align: center;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  text-align: center;
}

.tooltip_content {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: orangered;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
}

#tooltip_content_demo_8 {
  position: absolute;
  z-index: 1;
  top: -10px;
  left: 105%;
  opacity: 0.1;
  transition: opacity 1s;
}

#tooltip_content_demo_8::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%;
  /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

.tooltip:hover .tooltip_content {
  visibility: visible;
}

.tooltip:hover .tooltip_content_styled {
  opacity: 1 !important;
}

<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below,the tooltip text will fade in and take 1 second to go from nearly invisible to visible.</p>

<div class="tooltip" id="tooltip_demo_8">Hover over me to tooltip
  <span class="tooltip_content tooltip_content_styled" id="tooltip_content_demo_8">This is the tooltip text content</span>
</div><br/>

为什么我的 CSS 不透明度过渡不起作用？

如何解决为什么我的 CSS 不透明度过渡不起作用？

解决方法

相关推荐