我正在尝试在悬停时在标志图标中填充颜色

Posted 2023-02-22

【中文标题】我正在尝试在悬停时在标志图标中填充颜色

【英文标题】：I am trying to fill color in flag icon on hovering

【发布时间】：2021-01-22 10:38:08

【问题描述】：

我已经试过了。但它不会在悬停时被填充。

.flag-icon

  fill:white;


.flag-icon:hover

  fill:red;

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Roboto+Mono:400,500|Material+Icons" rel="stylesheet">

<span class="material-icons flag-icon">outline_flag</span>

【参考方案1】：

.flag-icon::before 
        font-size: 18px;
        margin-top: 5px;
        font-family: "Material Icons";
        transition: 0.1s ease;
        content: 'outlined_flag';
    
    
    .flag-icon:hover::before 
        content: "flag";
        color: red;
    
    

【参考方案2】：

使用color 而不是fill。

参见下面的 sn-p：

.flag-icon
  color:blue;

.flag-icon:hover
  color:red

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Roboto+Mono:400,500|Material+Icons" rel="stylesheet">

<span class="material-icons flag-icon">outline_flag</span>

编辑 - 填充 x 轮廓图标。

要获得轮廓样式，必须添加类material-icons-outlined。

如果您想在悬停时从轮廓图标更改为填充图标，您可以使用以下依赖于 simples jquery 脚本的代码：

$(document).ready(function()
  $('.flag-icon').hover(function()
    $(this).removeClass('material-icons-outlined');
  , function()
    $(this).addClass('material-icons-outlined');
  );
);

.flag-icon:hover
  color: red;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Sharp|Material+Icons+Round|Material+Icons+Two+Tone" rel="stylesheet">

<span class="flag-icon material-icons material-icons-outlined">flag</span>

查看此问题以获取更多示例： How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?

【讨论】：

它会改变轮廓标志的颜色。我想将轮廓标志更改为填充标志

我添加了一个新代码，用于从轮廓变为填充标志