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

我对一些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: ""，但没有任何运气。

这里的小提琴：http://jsfiddle.net/nDq9f/3/

任何人谁可以帮我吗？

来源

2014-01-08 TheYaXxE

强权所能帮助。 [CSS3转换伪元素（：after，：before）not working？]（http://stackoverflow.com/questions/10578424/css3-transitions-on-pseudo-elements-after-before-not-working） – fiskolin

尝试时，按钮会上下移动。但动画的作品。 http://jsfiddle.net/nDq9f/4/ – TheYaXxE

不理解在white-spaces_的按钮中断处的_text。在边缘？当你悬停时，按钮也会上下移动？ – fiskolin

我得到了我定！

我但所有的造型（显示，宽度，高度等）在span:before, span:after部分，而不是在:hover一部分。那么这一切都很完美！

你可以在这篇文章的底部看到小提琴。

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

来源

2014-01-08 21:43:12 TheYaXxE

尝试在span:before, span:after可以改变：

span:before, span:after { 
    content: attr(title); 
    filter: alpha(opacity=00); 
    opacity: 0; 
    -webkit-transition: opacity .6s ease-in-out; 
    -moz-transition: opacity .6s ease-in-out; 
    -ms-transition: opacity .6s ease-in-out; 
    -o-transition: opacity .6s ease-in-out; 
    transition: opacity .6s ease-in-out; 
}

注：的content: attr(title);特性使得所有意义

来源

2014-01-08 15:34:13 fiskolin

按钮，仍然向上和向下移动：http://jsfiddle.net/nDq9f/5/ – TheYaXxE

你在你的CSS有一些错误，比如'border-color：transparent transparent rgba（0,0,0,0.75 ）;透明;'......而且你不仅改变了我的CSS。：P检查[这个小提琴]（http://jsfiddle.net/franciscocarvalho/nDq9f/6/）。 – fiskolin

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

回答

相关问题