CSS - 懸停轉型：後

我有這樣的CSS代碼：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;  

}

...我想下的文本顯示圖像的一些轉變，但我的代碼不能正常工作。我有什麼不好？感謝每一個答案。

來源

2015-11-19 peter

你想改變什麼？動畫應包含哪些內容？ –

我想在圖像下方出現圖像，當我將鼠標放在文字上時，動畫可以進行一些轉換 – peter

「某些轉換」並不意味着什麼。你不能告訴CSS你想要「轉換」！你必須具體！你是否希望圖片從0x0尺寸增長？淡入？從屏幕頂部進入？什麼？ –

嘗試使用這個代替

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

來源

2015-11-19 17:50:54

我不知道你在尋找什麼轉變了，但這裏是一個開始。您需要在:hover之前定義::after的屬性。像這樣：

.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; 
 
}

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

來源

2015-11-19 18:10:04 cocoa

嗯，我等待OP在發佈完全相同的解決方案之前澄清他們的問題（除了我的圖片是19x19）。 –

試試這個https://jsfiddle.net/2Lzo9vfc/128/

HTML

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

CSS

.li2 { 
    text-transform: uppercase; 
    display:inline; 
    position:relative; 
    font-family: "Trebuchet MS", Arial; 
    color: black; 
    font-size: 15px; 
    margin-left: 70px; 
    position: relative; 
    transition: all 0.5s ease-in; 
} 

.li2:after { 
    content: url("http://placehold.it/350x150"); 
    display: block; 
    background-size: 19px 19px; 
    position: absolute; 
    left: 0; 
    top: 20px; 
    transition: all 0.5s ease-in; 
    opacity: 0; 
} 

.li2:hover::after { 
    opacity: 1; 
}

來源

2015-11-19 18:12:20

CSS - 懸停轉型：後

回答

相關問題