How do You Change Content in CSS When Hovering?

Admin 1
Viewed 129

How can I replace text with CSS using content?

Also just FYI don't worry about the .fab or Font Awesome unless you also know how to fix that. And if you can fix the JavaScript that'd be great too.

To use Font Awesome in your HTML put 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

in your head tag.

.sell {
  margin: -20px auto;
  width: 300px;
  height: 30px;
  background-color: #FDFEFE;
  border: 2px solid #FDFEFE;
  border-radius: 5px;
}

.styff {
  font-size: 20px;
  padding: 5px;
  position: relative;
  text-align: center;
  margin: 0 auto;
}

.styff:hover:after {
  font-size: 20px;
  padding: 5px;
  font-family: Font Awesome 5 Free;
  position: relative;
  text-align: center;
  margin: 0 auto;
  content: "This is currently not available in the App Store \f370";
}

.fab {
  color: #29B6F6;
}
<div class="sell">
  <p class="styff">Buy now in the App Store <i class="fab fa-app-store-ios fa-lg"></i></p>
</div>

css html javascript
4 Answers

.sell {
  margin: -20px auto;
  width: 300px;
  height: 30px;
  background-color: #FDFEFE;
  border: 2px solid #FDFEFE;
  border-radius: 5px;
}

.styff {
  font-size: 20px;
  padding: 5px;
  position: relative;
  text-align: center;
  margin: 0 auto;
}

.styff:after {
  content: 'Buy now in the App Store';
  font-size: 20px;
  padding: 5px;
  position: relative;
  text-align: center;
  margin: 0 auto;
}

.styff:hover:after {
  content: "This is currently not available in the App Store";
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<div class="sell">
  <p class="styff"><i class="fab fa-app-store-ios fa-lg"></i></p>
</div>

You can use :before & :after pseudo elements for this.

user_51349800
user_105525190

Add additional span to to your HTML, on hover hide that span:

.sell {
  margin: -20px auto;
  width: 300px;
  height: 30px;
  background-color: #FDFEFE;
  border: 2px solid #FDFEFE;
  border-radius: 5px;
}

.styff {
  font-size: 20px;
  padding: 5px;
  position: relative;
  text-align: center;
  margin: 0 auto;
}

.styff:hover .text-to-hide {
  display: none;
}
.styff:hover:after {
  font-size: 20px;
  padding: 5px;
  font-family: Font Awesome 5 Free;
  position: relative;
  text-align: center;
  margin: 0 auto;
  content: "This is currently not available in the App Store \f370";
}

.fab {
  color: #29B6F6;
}
<div class="sell">
  <p class="styff"><span class="text-to-hide">Buy now in the App Store</span>
  <i class="fab fa-app-store-ios fa-lg"></i></p>
</div>

user_13462340

You need two versions of content for hovering and normal.

.sell {
  margin: -20px auto;
  width: 300px;
  height: 30px;
  background-color: #FDFEFE;
  border: 2px solid #FDFEFE;
  border-radius: 5px;
}

.styff {
  font-size: 20px;
  padding: 5px;
  position: relative;
  text-align: center;
  margin: 0 auto;
}

/*.styff:hover:after {
  font-size: 20px;
  padding: 5px;
  font-family: Font Awesome 5 Free;
  position: relative;
  text-align: center;
  margin: 0 auto;
  content: "This is currently not available in the App Store \f370";
}*/

.fab {
  color: #29B6F6;
}
/* that's new */
.sell:hover .styff.hide_on_hover {
  display: none;
}
.sell .styff.on_hover_only {
  display: none;
}
.sell:hover .styff.on_hover_only {
  display: block;
}
<div class="sell">
  <p class="styff hide_on_hover">Buy now in the App Store <i class="fab fa-app-store-ios fa-lg"></i></p>
  <p class="styff on_hover_only">Not buy for your sane!</p>
</div>

user_93692970
Related