如何仅用CSS实现鼠标悬停时显示矩形颜色代码文本

你只需要修改CSS中的.square:hover选择器，添加一行样式就能搞定，完全不用改动JavaScript代码：

修改后的完整CSS代码 #

.square{
height: 900px;
width: 500px;
background-color: black;
border: 5px solid white;;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: transparent; /* 默认让文本透明隐藏 */
}

.btn--random{
width: 10%;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
margin-top: 20px;
margin-left: 45%;
font-size: 30px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: white;
background-color: darkcyan;
cursor: pointer;
}

.square:hover{
color: white; /* 鼠标悬停时把文本改成可见的白色，也可以换成其他你喜欢的颜色 */
}

原理说明 #

• 默认状态下，通过color: transparent让方块内的文本完全透明，达到隐藏效果
• 当鼠标悬停在方块上时，:hover伪类触发，将文本颜色设置为可见的颜色（比如白色），文本就会显示出来
• 这是最基础简单的实现方式，完全满足你只用CSS完成需求的要求

内容的提问来源于stack exchange，提问作者Queen