仅用CSS和HTML，能否通过:hover选择器改变按钮文本而非颜色？

可以实现，下面提供两种可行方案：

方案一：利用CSS伪元素（:before/:after） #

通过控制伪元素的content属性和定位，在hover状态切换显示的文本内容。

CSS代码 #

.button {
    width: 120px;
    height: 50px;
    background-color: gold;
    border: 2px solid firebrick;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    /* 隐藏按钮自身的文本占位 */
    color: transparent;
}

/* 默认状态显示的文本 */
.button:before {
    content: "Understand?";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
}

/* 悬停状态替换文本 */
.button:hover:before {
    content: "Yes";
}

.button:hover {
    background-color: rgb(0, 255, 0);
}

HTML代码 #

<button class="button"></button>

方案二：用span包裹双文本，控制显示隐藏 #

在按钮内部放置两个span标签，分别对应默认和悬停时的文本，通过hover状态切换它们的显示状态。

CSS代码 #

.button {
    width: 120px;
    height: 50px;
    background-color: gold;
    border: 2px solid firebrick;
    border-radius: 10px;
    font-weight: bold;
    color: black;
    cursor: pointer;
}

/* 悬停文本默认隐藏 */
.button .hover-text {
    display: none;
}

/* 悬停时切换两个文本的显示状态 */
.button:hover .default-text {
    display: none;
}
.button:hover .hover-text {
    display: inline;
}

.button:hover {
    background-color: rgb(0, 255, 0);
}

HTML代码 #

<button class="button">
    <span class="default-text">Understand?</span>
    <span class="hover-text">Yes</span>
</button>

两种方案都无需依赖JavaScript，纯靠CSS和HTML就能实现需求。方案一不需要修改原有HTML结构，方案二更直观易维护，可根据实际场景选择使用。

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