Html 当您将鼠标悬停在文本上时，如何更改文本？_Html_Css

Html 当您将鼠标悬停在文本上时，如何更改文本？

html css

Html 当您将鼠标悬停在文本上时，如何更改文本？,html,css,Html,Css,我试图制作一个框，当你将鼠标悬停在上面时，它会显示文本。这是我目前拥有的代码： <style> /* WHILE HOVERED */ .one:hover { box-shadow: 0 15px 30px black; background: #00576f; background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853); ba

我试图制作一个框，当你将鼠标悬停在上面时，它会显示文本。这是我目前拥有的代码：

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


/*悬停时*/
.1:悬停{
盒影：0 15px 30px黑色；
背景：#00576f；
背景：-莫兹线性梯度（顶部，#0c5f85，#0b5273 50%，#024869 51%，#003853）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0，#0c5f85）、颜色停止（.5，#0b5273）、颜色停止（.51，#024869）到（#003853））；
}  
/*单击时*/
.1：活动{}
.其他{
宽度：200px；
高度：200px；
线高：100px；
颜色：白色；
文字装饰：无；
字体大小：50px；
字体系列：helvetica，arial；
字体大小：粗体；
显示：块；
文本对齐：居中；
位置：相对位置；
利润上限：10px自动；
/*背景梯度*/
背景：#00485c；

我知道可能有一种更简单的方法来做我目前为止所做的事情，但我只需要知道当你将鼠标悬停在正方形上时，如何使文本显示在正方形中。

谢谢。

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

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

这似乎更适合javascript/jquery。我同意Bernie的观点。当您需要使用锤子时，请使用锤子。@Bernie没有理由依赖JS。它可以通过多种方式在CSS中实现。@flem，但是，正如我所说，它似乎更适合jquery。请注意，这会将内容添加到div之外。它还要求您的页面内容存在于CSS文件中。这不是很好的实践。