Question

HTML：

<div class="postleftmen">
        <header class="clearfix">
            <span>Post Ad</span>
            <h1>Select categlory</h1>
        </header>
        <ul class="cbp-vimenu">
            <li><a href="#" class="">Logo</a></li>
            <li><a href="#" class="flaticon-smart"></i>Archive</a></li>
            <li><a href="#" class="flaticon-smart">Search</a></li>
            <li><a href="#" class="flaticon-baby110">Pencil</a></li>
            <li><a href="#" class="icon-location">Location</a></li>
            <li><a href="#" class="icon-images">Images</a></li>
            <li><a href="#" class="download">Download</a></li>
        </ul>

我正在尝试更改悬停时的字体图标颜色

class="flaticon-smart"

用于修改字体图标的代码

访问了此链接CSS, changing hover effect of icon font in a link并更改了我的代码，但它无法正常工作

CSS

@font-face {
font-family: "Flaticon";
src: url("flaticon.eot");
src: url("flaticon.eot#iefix") format("embedded-opentype"),
url("flaticon.woff") format("woff"),
url("flaticon.ttf") format("truetype"),
url("flaticon.svg") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
font-family: Flaticon;
font-size: 10px;
font-style: normal;
margin-left: 10px;
}
.flaticon-smart:before {
content: "\e038";
    color: #9999ff;
}

Answer 1

如果要使用JQuery，可以使用hover函数

首先包括JQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>

然后

$(document).ready(function()    {
    $('.flaticon-smart').hover(function(){
        $(this).css('color', '#f00');
    });
});

修改

如果您想使用CSS将其放在<head> </head>部分
中
<style> .flaticon-smart:hover{ color: #f00; } </style>

当您停止悬停链接时，颜色会更改回原始颜色。如果您想永久更改它，请使用JQuery解决方案

Answer 2

我不建议使用jQuery。相反，这样做。

常规或正常模式

[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {color: $smoke;}

HOVER或MOUSEOVER MODE

[class^="flaticon-"]:hover:before, [class*=" flaticon-"]:hover:before, 
[class^="flaticon-"]:hover:after, [class*=" flaticon-"]:hover:after  {color: $red;}

RECAP：

常规或正常模式：元素：after，element :: after或element：before，element :: before（no change）

HOVER OR MOUSEOVER MODE：element：hover :: after或element：hover :: before（change）

我希望这对你有意义并祝你好运。

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

Fonticon颜色在悬停时不会改变

2 个答案: