离子图标悬停效果

Question

我正在使用 ion-icons 作为我正在构建的网站的一部分。我如何 select css 中的单个图标？每次我尝试向 link 添加 class 或 ID 时，它都会在我的网站上消失。

我想使用 3 个不同的社交媒体图标，并在鼠标悬停在它们上方时更改颜色。 IE，当您将鼠标悬停在 FaceBook 图标上时，它会将颜色更改为 facebook 蓝色。

这是我正在使用的示例之一：

 <ul class="social-links">
     <li><a href="#"><ion-icon name="logo-instagram"></ion-icon></a></li>
     <li><a href="#"><ion-icon name="logo-facebook"></ion-icon></a></li>
 </ul>

提前致谢。

Answer 1

根据问题中给出的代码加上后续评论中添加的代码，我进行了一个小测试，它似乎工作正常。

这意味着一定有什么东西 'further up' 干扰了图标设置。可以在 CSS 社交链接中 class?

这是工作片段。请注意，图标在悬停时变为红色只是为了使其与标准颜色不同。

<head>
<!--<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>-->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>

<style>
.instaLogo:hover { color: #1877f2; color:red;} /*change to red just to show that the color is actually changing */
</style>
</head>
<body>
 <ul class="social-links">
     <li><a href="#" class="instaLogo"><ion-icon name="logo-instagram"></ion-icon></a></li>
     <li><a href="#" class="instaLogo"><ion-icon name="logo-facebook"></ion-icon></a></li>
 </ul>
 </body>

离子图标悬停效果

Ionic icons hover effect

html

css

ionic-framework

icons

ionicons