用懸停屬性編輯多個東西CSS

所以我試圖編輯div中的元素，當div懸停時，使用純CSS。我現在擁有的是以下。用懸停屬性編輯多個東西CSS

<html> 
<head> 
<style> 
div{ 
background-color:blue; 
border-radius:5px; 
width:50px; 
height:60px; 
transition:width 2s; 
-moz-transition:width 2s; 
-webkit-transition:width 2s; 

} 
p.op{ 
opacity:0.0; 
transition:opacity 2s; 
-moz-transition:opacity 2s; 
-webkit-transition:opacity 2s; 

} 

div:hover{ 
width:120px; 
} 
</style> 
</head> 
<body> 
<div> 
<p class="op">Hello World</p> 
</div> 
</body> 
</html>

我想知道如何編輯文本的不透明度的div的懸停，使得文本將從無形的DIV擴大變成可見的。任何幫助，將不勝感激。謝謝。

來源

2013-03-19 user2186697

div:hover p.op 
{ 
    opacity:1; 
}

現場演示：http://jsfiddle.net/ypzxk/1/

演示還包含了你的CSS一些變化，使文本的例子更清晰，文本不換行的時候div寬度太短：

div{ 
background-color:blue; 
border-radius:5px; 
width:50px; 
height:60px; 
transition:width 2s; 
-moz-transition:width 2s; 
-webkit-transition:width 2s; 
overflow:hidden; 
} 
p.op{ 
opacity:0.0; 
color:#fff; 
transition:opacity 2s; 
-moz-transition:opacity 2s; 
-webkit-transition:opacity 2s; 
width:120px; 
} 

div:hover{ 
width:120px; 
} 

div:hover p.op 
{ 
    opacity:1; 
}

來源

2013-03-19 13:28:33 Curt

用懸停屬性編輯多個東西CSS

回答

相關問題