html - 将动画放在有内容的伪元素上

Question

我对一些 CSS 伪元素有一些小问题。 我正在尝试制作自定义工具提示，在悬停时淡入和淡出，但它似乎不起作用。

伪元素从 data-title HTML5 标记获取内容。

---

我已经尝试过这个，但没有任何运气:

span:before, span:after {
   opacity: 0;
   -webkit-transition: all .2s;
   -moz-transition: all .2s;
   -o-transition: all .2s;
   -ms-transition: all .2s;
   transition: all .2s;
}

span:hover:after {
   content: attr(data-title);
   display: block;
   opacity: 1;
   position: absolute;
   width: 100px;
   height: 30px;
   line-height: 30px;
   text-align: center;
   color: #FFF;
   background: rgba(0,0,0,0.75);
   border-radius: 3px;
   left: -20px;
   top: 46px;
}

工具提示正确显示，但没有过渡。我还尝试在 span:before, span:after 部分添加 content: "" ，但也没有任何运气。

---

这是 fiddle :http://jsfiddle.net/nDq9f/3/

谁能帮帮我？

Answer 1

我已经修好了!

我但所有样式(显示、宽度、高度等...)都在span:before、span:after部分，而不是在 >:hover 部分。然后一切都很完美!

您可以在这篇文章的底部看到 fiddle 。

span:before, span:after {
   content: attr(data-title);
   display: block;
   position: absolute;
   width: 100px;
   height: 30px;
   line-height: 30px;
   text-align: center;
   color: #FFF;
   background: rgba(0,0,0,0.75);
   border-radius: 3px;
   left: -20px;
   top: 46px;
   opacity: 0;
   -webkit-transition: all .2s;
   -moz-transition: all .2s;
   -o-transition: all .2s;
   -ms-transition: all .2s;
   transition: all .2s;
}

span:hover:after {
   opacity: 1;
}

我还添加了一个 pointer-events: none;，这样当工具提示具有 opacity: 0; 时，悬停在其上时就无法显示工具提示了

Here's the js Fiddle