1

因此，当 div 悬停时，我尝试使用纯 CSS 编辑 div 中的元素。我现在拥有的如下。

<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 的扩展而从不可见变为可见。任何帮助，将不胜感激。谢谢。

4

1 回答 1

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

现场演示：http: //jsfiddle.net/ypzxk/1/

Demo 还包含对 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-19T13:28:33.047 回答