Question

我有这个CSS代码：

.li2 {
    text-transform: uppercase;
    display:inline;
    position:relative;
    font-family: "Trebuchet MS", Arial;
    color: white;
    font-size: 15px;
    margin-left: 70px;
}
.li2:hover {
    position: relative;
}
.li2:hover:after {
    content: url("images/small_show.png"); 
    display: block;
    background-size: 19px 19px;
    width: 19;
    height:19;
    position: absolute;
    left: 34px;     
    top: -30px; 
    transition:0.5s;    

}

...我希望在文本下显示图像的过渡，但我的代码不起作用。我有什么不好的？谢谢你的每一个答案。

Answer 1

我不确切知道您正在寻找什么样的过渡，但这是一个开始。您需要在::after之前定义:hover的属性。像这样：

＆＃13;

.li2 {
    text-transform: uppercase;
    display:inline;
    position:relative;
    font-family: "Trebuchet MS", Arial;
    color: red;
    font-size: 15px;
    margin-left: 70px;
}
.li2:hover {
    position: relative;
}
.li2::after {
    content: url("http://placebabies.com/200/300"); 
    display: block;
    background-size: 19px 19px;
    width: 19;
    height:19;
    position: absolute;
    left: 34px;     
    top: -30px; 
    opacity: 0;
    transition:0.5s;    
}
.li2:hover::after {
    opacity: 1;
}

＆＃13;

<ul>
    <li class="li2">List Item</li>
</ul>

＆＃13;

Answer 2

试试这个https://jsfiddle.net/2Lzo9vfc/128/

<强> HTML

FindChild

<强> CSS

<p class="li2">lorem ipsum dolor</p>

Answer 3

尝试使用此代替

-moz-transition:0.5s all linear;
-webkit-transition:0.5s all linear;
-o-transition:0.5s all linear;
transition:0.5s all linear;

css - 悬停过渡：之后

3 个答案: