Without using JavaScript, only CSS and HTML: When using ":hover" css selector, is it possible to change text instead of the color?

Bailey West 0
Viewed 25

Here is the basic button hover program. I can control what the color of the button is depending on it's hover state, but can I change the text inside the button if someone hovers over it?

for example: a button that says "Understand?" and when you hover over it, the text changes to "Yes"

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

.button:hover {
    background-color:rgb(0, 255, 0)
}
<button class="button">hover over me!</button>

css html
1 Answers

This should work. I think I'd probably just go ahead and use js for this, but I don't see any glaring issues w/ this approach. Not ideal for accessibility maybe.

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

.button::before {
    display: block;
    content: "Hover over me!"
}

.button:hover::before {
    content: "FOO"
}
<button class="button"></button>

We just move the text content of the button into a ::before pseudo-element, and can control its content via css now.

CollinD0
Related