![](/img/trans.png)
[英]How can you make CSS on-hover content stay in place when you click or stop hovering using Javascript?
[英]How do You Change Content in CSS When Hovering?
如何使用content
替换CSS
文本?
除了你也知道如何解决这个问题之外,我们也不用担心.fab
或Font Awesome。 如果你能修复那个也很棒的JavaScript。
在HTML put中使用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>
.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
伪元素。
添加额外的跨度到您的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>
您需要两种版本的内容用于悬停和正常。
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.