Question

我尝试添加到此工具提示：http://jsfiddle.net/anx26/5/使用纯css对悬停的淡入和淡出效果。

我尝试使用关键帧进行转换，动画，但没有任何作用，任何想法？

可能是由:after和:before造成的？

Answer 1

在您提供的代码中，没有任何内容可以提供转换功能。：只有在它徘徊之后才存在，并且它不能从不存在转变为现存。

从您的工具提示＆＃34;＆＃34;定义＆＃34;中删除：悬停，而是使用：仅悬停以进行转换。我不确定我在这里有什么意义，所以这是一个例子。

你有什么：

.tooltip:hover:after { content: 'test'; }

当你将鼠标悬停在你的div上时，：弹出并弹出后退出第二个你停止盘旋。没有过渡可能发生，因为他们被突然出现/消失后中断：在现实之后。

你需要的是更像这样的东西：

.tooltip:after {
   content: 'test'; /* Tooltip exists */
   opacity: 0; /* Tooltip is invisible */
   pointer-events: none; /* Tooltip is unclickable */
   transition: opacity .5s; /* Tooltip visibility will fade */
}

.tooltip:hover:after {
   opacity: 1; /* Tooltip is visible */
   pointer-events: initial; /* Tooltip is clickable */
}

这样，您的工具提示始终存在，将鼠标悬停只会使其变得可见。

希望有所帮助，如果我不够清楚，请告诉我。

淡入/淡出效果：＆amp; ：在带css的元素之前

1 个答案: