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/

divデモには、サンプルのテキストがより明確になり、幅が短すぎる場合にテキストが折り返されないように、CSS にいくつかの変更も含まれています。

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 に答える