离子图标悬停效果答案

【问题标题】：Ionic icons hover effect离子图标悬停效果
【发布时间】：2020-11-11 06:44:32
【问题描述】：

我正在使用 ion-icons 作为我正在构建的网站的一部分。如何在 css 中选择单个图标？每次我尝试向链接添加类或 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>

提前致谢。

【问题讨论】：

嘿，在 css 中使用悬停效果
你能举一个例子，尝试添加一个 Id 或类来显示你在哪里添加它以及它有什么 CSS，因为只添加一个 id 说到锚元素听起来不像应该使图标“消失”。最好创建一个 sn-p 以便我们自己查看。谢谢。
@Aahad，我知道这是我应该使用的效果。我很难选择要应用它的 html 对象。
@AHaworth，我尝试了几个不同的地方。我试图在锚标签内添加一个像这样的类 class="instaLogo" ，然后在名称后面的 ion-icon 标签内再次添加。每次我这样做时，该图标都会从我的页面上消失，但 Facebook 的图标仍然存在。我可以看到它的“轮廓”，但它不可见。 <li><a href="#" class="instaLogo"><ion-icon name="logo-instagram"></ion-icon></a></li> 和 `

<head>  <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>