仅使用html/css更改悬停状态下的Google Material图标
Google Material图标是一套由Google设计的开源图标库，它提供了丰富多样的图标，可以用于网页、移动应用等各种界面设计中。使用html/css可以轻松地更改Google Material图标在悬停状态下的样式。
要更改Google Material图标在悬停状态下的样式，可以通过以下步骤实现：
- 引入Google Material图标库：在HTML文件的头部添加以下代码，以引入Google Material图标库的CSS文件。<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
- 创建一个带有Google Material图标的元素：在HTML文件中，使用
<i>标签创建一个元素，并为其添加material-icons类。例如：<i class="material-icons">favorite</i>这将创建一个带有"favorite"图标的元素。 - 更改悬停状态下的样式：使用CSS选择器来选择悬停状态下的Google Material图标元素，并为其添加样式。例如，可以使用
:hover伪类选择器来选择悬停状态下的图标，并更改其颜色：.material-icons:hover { color: red; }这将使悬停状态下的图标颜色变为红色。
通过以上步骤，可以使用html/css更改悬停状态下的Google Material图标。根据具体需求，可以通过CSS来修改图标的大小、颜色、背景等样式。
推荐的腾讯云相关产品：腾讯云CDN（内容分发网络），它可以加速网站的访问速度，提高用户体验。腾讯云CDN产品介绍链接地址：https://cloud.tencent.com/product/cdn
相关·内容
0回答
仅使用html/css更改悬停状态下的Google Material图标
html、css、google-material-icons
我想在按钮悬停时更改Google Material Icon (实际的图标本身)。我只想用HTML和CSS来做这件事。我想让它从‘加号’图标变成像‘检查’图标一样的东西，特别是使用‘完成’图标。谢谢 font-family: 'Material Icons'
浏览 6提问于2017-06-10得票数 9
回答已采纳
1回答
CSS在悬停时更改单独的元素，而所有这些元素都是悬停的。
javascript、html、css、css-selectors、hover
我在寻找堆叠溢出的解决方案，但什么也没找到。我有一套图标。默认情况下，它们是灰色的，只有4/7是可见的。当我在带有图标的div上盘旋时，我希望7中的7是可见的和灰色的。在盘旋时，我希望每个单独的图标，也就是悬停的图标，用相同的不同颜色的图标进行更改(我对每个图标都有
浏览 1提问于2018-10-12得票数 0
回答已采纳
3回答
如何在悬停状态下更改图标颜色？
javascript、html、css、reactjs、material-ui
我正在尝试更改IconButton material组件中材质图标的颜色(应该会触发颜色更改的操作-将鼠标悬停在IconButton上)。 如何做到这一点呢？仅当将鼠标悬停在图标本身而不是IconButton上时，才能直接向图标添加类。我的代码： <IconButton className="add-icon-btn" onClick={toggleNominationFo
浏览 49提问于2020-06-16得票数 5
回答已采纳
4回答
在悬停时更改PNG图像的颜色？
css、hover
我添加了这些图标到我的网站上，想要改变颜色的hover...what是最好的解决方案吗？
这些图标是png格式的，并希望在悬停到他们的蓝色colors...thanks提前改变。
浏览 1提问于2011-03-27得票数 3
2回答
当我使用物化css时，如何改变谷歌图标的颜色？
css、material-design、materialize
我创建了一个用于登录的表单，如下所示：
当我不填写任何东西，图标将有黑色像电子邮件行，否则它将变成绿色的密码行。我相信它的默认设置，显然这不是一个好的颜色组合。我使用的所有css都来自。<div class="row"> <i class="material
浏览 7提问于2016-03-22得票数 1
回答已采纳
1回答
悬停材质UI图标和文本
css、reactjs、material-ui
我制作了一个类似面包屑的东西，上面有一个文本和一个图标。我正在使用材料UI图标。import UpdateIcon from "@material-ui/icons/Update"; > <
浏览 22提问于2020-11-02得票数 0
1回答
angular primeng p-确认对话框-如何用google material图标替换对话框面板的关闭图标
angular、primeng、google-material-icons、primeng-dialog
我正在处理一个需求，我需要用google material图标替换对话框面板的关闭图标。 找到下面的截图，我想在其中用google material图标替换关闭图标。dialog box screenshot 下面的代码生成带有一些自定义消息的对话框。material图标的示例如下所示。<span class="material-icons&quo
浏览 17提问于2021-08-12得票数 0
7回答
安装npm后如何引用Google Material-Design-Icons？
css、reactjs、npm、material-design、material-ui
那么，在完成npm install material-design-icons之后，如何在我的React应用程序中使用它们呢？
包含在中的方法不包含npm方法。
浏览 2提问于2018-06-05得票数 16
1回答
活动状态图像显示
jquery、css
我有一些图像需要更改，不仅基于悬停，还基于活动状态。.quick-links em:hover { background: transparent url(../images/quick-links.png)10px 9px no-
浏览 0提问于2010-03-18得票数 0
回答已采纳
1回答
谷歌字体/icon和/css CDN链接的区别？
cdn、google-font-api、google-fonts、google-cloud-cdn
这是关于使用https://fonts.googleapis.com/css奇怪的是，我也能做一些像这样的事情，我只是好奇。谢谢!
浏览 4提问于2020-06-11得票数 0
1回答
材料设计Lite字体问题
html、css、material-design-lite
我开始用visual作为开发环境来开发一个新的网站。在nuget包管理器中，我在我的项目中添加了“材料设计Lite”。我刚刚开始测试一些组件，我有一个问题。这是我想要实现的手册代码。Disabled Action</li> </ul>在我的html</e
浏览 3提问于2016-04-30得票数 0
回答已采纳
2回答
Bing地图悬停路点图钉图标
bing-maps、bing-api
我使用此方法更改了航点图钉图标： itineraryContainer: document.getElementByIddraggable:false, }然后，我使用以下命令渲染贴图：在站点中，我看到带有自定义<em
浏览 4提问于2011-09-21得票数 3
1回答
在Wordpress Nav菜单中使Dash图标具有Hover效果
css、wordpress
如果您查看的顶部导航菜单，您将看到我尝试使用通过Wordpress菜单分配的CSS类在其中添加dash图标。在常规状态下，仪表符看起来很好，但不具有悬停效果。将悬停类应用于a: the元素的最佳方法是什么？
浏览 1提问于2014-09-14得票数 0
回答已采纳
16回答
如何使用新的材料设计图标主题:概述，圆形，双色调和夏普？
icons、material-design、google-material-icons
谷歌用4个新的预设主题改造了它的：然后使用所需的图标
<i class="material-icons">acc
浏览 0提问于2018-05-12得票数 263
回答已采纳
2回答
我正在尝试在悬停时填充旗帜图标的颜色
css、angular、angular-material
但它不会在悬停时被填满。{}
{}
<spanclass=&qu
浏览 0提问于2020-10-07得票数 1
1回答
创建动画搜索按钮
animation、search、button、icons
如何使用html、css和jquery创建带有google material图标的动态搜索按钮，然后使用此按钮搜索所有内容？
提前谢谢。
浏览 2提问于2016-10-18得票数 0
1回答
悬停在子菜单中的任何li元素(第二个ul元素)时，如何更改第一个ul li的颜色-仅限两个跨度图标？
css、css-selectors
我试图让我的第一个ul li span i类元素(在"a“元素之前和之后)的两个图标的颜色都改变了，但我似乎无法正确地定位它们。我已经设法让我的原始代码工作，通过单独悬停每个a/图标并改变它们的颜色，但我不想要这样。当我悬停在第二个(子菜单) li元素中时，我只想更改父li图标的颜色，即只有其父li的活动子菜单才能更改图标的颜色 任何解释都会被
浏览 25提问于2019-12-12得票数 0
21回答
角材料图标不工作
angular、angular-material、angular-material2
我安装了棱角的材料，我在ngmodule我已经导入了所有样式表
我还在我的应用程序组件中导入了它，这个组件实际上正在(尝试)使用它们(在它的开头还有一个import {MatIconModule} from '@angular/m
浏览 0提问于2018-04-12得票数 169
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
