0

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>
Bailey West
  • 3
  • 3

1 Answers1

0

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.

CollinD
  • 7,304
  • 2
  • 22
  • 45
  • Thank you! I believe this is the answer I was looking for. I haven't gotten to JavaScript in my studies yet but could you elaborate on how using this CSS button method would not be ideal for accessibility? – Bailey West Sep 21 '22 at 20:35
  • I may be wrong, but I'm not totally sure that this will appear as you'd expect to screen-readers, and any non-css-enabled crawler. Search engines might not see the text, that kinda stuff. It probably works fine, but would be worth verifying if it's very important. – CollinD Sep 21 '22 at 20:40
  • You may find screen readers don’t read out the content of pseudo elements as it’s not content in the DOM. – A Haworth Sep 21 '22 at 23:14