当鼠标悬停时，如何在CSS中更改内容？

Question

如何使用CSS的content属性替换文本？

还有，如果你知道如何修复它，不必担心.fab或Font Awesome。并且如果你能够修复JavaScript问题，那就太好了。

要在HTML中使用Font Awesome，请输入

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

在您的头部标签中。

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

- user10637393

---

该问题已经得到解决。 - user10637393

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伪元素来实现这个。

- Smollet777

Answer 2

尝试添加以下内容

  .styff:hover{
    font-size:0;
  }

https://jsfiddle.net/bqgfn56o/

- jastigarraga

---

它还会将字体大小设置为0，适用于伪元素。 - Justinas

请检查代码片段，它不起作用（因为字体大小已经在之后设置了）（抱歉之前没有包含它）。 - jastigarraga

Answer 3

在你的HTML中添加额外的span，在悬停时隐藏该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>

- Justinas

Answer 4

您需要两个版本的内容，一个用于悬停状态，另一个用于正常状态。

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

- A. Denis