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!

Answer 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
    }