-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 回答