Question

如何使用CSS用content替换文本？

仅供参考，除非您也知道如何解决该问题，否则我不会担心.fab或Font Awesome。而且，如果您可以修复JavaScript，那就太好了。

要在HTML put中使用“真棒字体”

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

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伪元素。

Answer 2

将其他跨度添加到HTML中，将鼠标悬停时隐藏该跨度：

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

Answer 3

尝试添加以下内容

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

https://jsfiddle.net/bqgfn56o/

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>

悬停时如何在CSS中更改内容？

4 个答案: