说的是插入icon图点击变色
时间: 2023-12-12 19:02:49 浏览: 44
要实现插入的图标点击后变色的效果,你可以使用一些图标库,如Font Awesome、Material Icons等,这些库提供了一系列的图标供你使用。你可以选择一个合适的图标,然后通过HTML、CSS和JavaScript来实现点击后变色的效果。
以下是一个示例代码:
HTML:
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<i id="my-icon" class="fas fa-star"></i>
```
CSS:
```css
.icon {
color: #000; /* 设置初始颜色 */
}
.icon.clicked {
color: #f00; /* 设置点击后的颜色 */
}
```
JavaScript:
```javascript
const icon = document.getElementById('my-icon');
icon.addEventListener('click', function() {
icon.classList.toggle('clicked');
});
```
在这个示例中,我们使用了Font Awesome图标库,并插入了一个星星图标。你可以根据需要替换`fas fa-star`类为其他图标类。CSS和JavaScript代码与之前的示例相同,点击图标时会切换`clicked`类的状态,从而改变图标的颜色。
记得在HTML中引入对应的图标库样式表,并根据实际情况修改CSS和JavaScript代码以适应你的需求。