-1

カーソルを合わせるとテキストが表示されるボックスを作成しようとしています。これは私が現在持っているコードです：

<style>
/* WHILE HOVERED */  
.one:hover {  
    box-shadow: 0 15px 30px black; 
    background: #00576f;  
    background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853);  
    background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853));  
    }  

/* WHILE BEING CLICKED */  
.one:active {  }  

.other {  
 width: 200px;  
 height: 200px;  
 line-height: 100px;  
 color: white;  
 text-decoration: none;  
 font-size: 50px;  
 font-family: helvetica, arial;  
 font-weight: bold;  
 display: block;  
 text-align: center;  
 position: relative;  
margin-top: 10px auto;

/* BACKGROUND GRADIENTS */  
 background: #00485c;  






</style>
<body>
<center><div class="other one"/div></center>
</body>

これまでの方法でおそらくもっと簡単な方法があることは知っていますが、正方形にカーソルを合わせたときにテキストを正方形に表示する方法を知っていれば十分です。ありがとう。

4

1 に答える 1

0

これは純粋なCSSで行うことができますが、HTMLマークアップを変更できない場合は、JavaScriptの方が適している可能性があります。とにかく：

.one:hover:after {
    content: "My text here!"
}
于 2013-03-21T19:56:39.160 に答える