Change text on hover using CSS

Question

I have this markup and CSS

<div class="share-btn">
  20 Shares
  <span>Share Now</span>
</div>

CSS

.share-btn span{
  display: none;
}
.share-btn:hover {
  display: none;
}

.share-btn:hover span {
  display: block;
}

I'm trying to change the text on mouse hover. Hovering 20 Shares should change to Share Now. I tried with CSS but not working as I expected.

How can I do this using CSS?

Thanks!

mobis · Accepted Answer · 2017-09-04 18:55:22Z

1

Try this:

<div class="share-btn">
  <span id="one">20 Shares</span>
  <span id="two">Share Now</span>
</div>

css

 .share-btn #two{
      display: none;
    }

    .share-btn:hover #one {
      display: none;
    }

    .share-btn:hover #two {
      display: block
    }

answered Sep 4, 2017 at 18:55

mobis

1432 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user8559744 Over a year ago

Thanks for your answer but I can't use id because I have multiple share buttons.

Collectives™ on Stack Overflow

Change text on hover using CSS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related