Question

我正在尝试制作一个显示文本的框，当您将鼠标悬停在该框上时。这是我目前的代码：

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

我知道到目前为止可能有一种更简单的方法可以做我所拥有的，但我只需要知道当你将鼠标悬停在方格上时如何使文字显示在方格中。感谢。

Answer 1

您可以在纯CSS中执行此操作，但如果您无法更改HTML标记，则JavaScript可能是更好的选择。无论如何：

.one:hover:after {
    content: "My text here!"
}

当你将鼠标悬停在文件上时如何更改文字？

1 个答案: