javascript - How do You Change Content in CSS When Hovering?

Question

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>

标签： javascripthtmlcss

Answer 1

.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>

您可以为此使用:before&:after伪元素。