Question

所以当我使用纯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扩展时，文本会从不可见变为可见。任何帮助，将不胜感激。感谢。

Answer 1

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

使用悬停属性CSS编辑多个事物

1 个答案: