css - 在悬停时切换一种 Font Awesome ,没有javascript

标签 css

我的 HTML:

<a href="#" class="button"><span><i class="fa fa-check"></i></span>Proceed to checkout</a><br>

我的 CSS:
body {
    text-align: center;
    padding: 40px;
    background: #F5F5F5;
}
.container {
    width: 300px;
    text-align: center;
    margin: auto;
}
.button {
    font-size: 14px;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding-right: 10px;
    padding-left: 50px;
    position: relative;
    background-color: rgb(111, 111, 111);
    color:rgb(255, 255, 255);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-shadow:0px 1px 0px rgba(0, 0, 0, 0.5);
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";
    zoom:1;
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#ff123852, Positive=true);
    -moz-box-shadow:0px 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:0px 2px 2px rgba(0, 0, 0, 0.2);
    box-shadow:0px 2px 2px rgba(0, 0, 0, 0.2);
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=2, Color=#33000000, Positive=true);
}

.button span {
    background-color: #730000;
}

.button span {
    position: absolute;
    left: 0;
    width: 40px;
 /*   background-color:rgba(0, 0, 0, 0.5); */
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-right: 1px solid rgba(0, 0, 0, 0.15);
}
.button:hover span, .button.active span {
    background-color:rgb(0, 102, 26);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
}
.button:active {
    margin-top: 2px;
    margin-bottom: 13px;
    -moz-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.5);
    -webkit-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.5);
    box-shadow:0px 1px 0px rgba(255, 255, 255, 0.5);
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ccffffff,Positive=true)";
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#ccffffff, Positive=true);
}

fiddle :http://jsfiddle.net/8ef8ph5x/8/

当悬停按钮的任何区域时,我试图将复选标记更改为玻璃(fa-glass)图标。
这怎么能用纯 CSS 实现,没有 javascript?

最佳答案

您可以设置content CSS 中的属性来替换图标:

.button .fa.fa-check:before {
    font-family: FontAwesome;
    content: '\f00c'; /* check */
}

.button:hover .fa.fa-check:before {
    content: '\f000'; /* glass */
}

fiddle :http://jsfiddle.net/9jdzvu8n/2/

您可以在 FontAwesome 网站的图标详细信息页面上找到图标的 unicode 值(例如 f00c)。

关于css - 在悬停时切换一种 Font Awesome ,没有javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32086355/

相关文章:

javascript - 使用 JavaScript 访问 CSS 动画播放状态

css - 在 Angular 7 中 - 如何设置使用 ng-content 投影的 HTML 样式

html - CSS Layouts 101 - 对结构化布局感到困惑

html - 如何使用css将div放在前台?

CSS 媒体查询在 Dolphin 浏览器中工作,但在 Chrome 或 Safari 中不工作?

jquery - 使用Jquery和CSS操纵iframe大小

jquery - jQuery滑动突出显示

javascript - 如何在highchart js中的3d图表内添加颜色

java - 修改Richfaces中按钮的背景

jquery - 在jquery .show()上触发CSS3动画