How to Change Content on Hover

How to change content on hover

The CSS content property along with ::after and ::before pseudo-elements have been introduced for this.

.item:hover a p.new-label:after{
    content: 'ADD';
}

JSFiddle Demo

Change text on hover, then return to the previous text

Yes, you can use CSS content. To switch between the normal text and "Reply!", put the normal text in a span and hide that when hovering.

button {
  width: 6em
}

button:hover span {
  display: none
}

button:hover:before {
  content: "Reply!"
}

<button><span>3 replies</span></button>

CSS change an element content on hover from different element

Currently this is not possible with CSS only. You can adjust the styles of children or upcoming siblings. But you can't set the styles of previous siblings or parent elements.

So regarding your case you could do:

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

CSS

/* next sibling only */
div.a:hover + div.b { /* styles for b when hovering a */ }

/* general sibling selector */
div.a:hover ~ div.c { /* styles for c when hovering a */ }
div.b:hover ~ div.c { /* styles for c when hovering b */ }

You can't go the other way, from b to a for example.

Demo

Try before buy

---

Related Topics