javascript如何给icon设置悬浮事件,并给其设置背景颜色
时间: 2024-02-29 16:51:20 浏览: 20
要给icon设置悬浮事件并给其设置背景颜色,可以在鼠标悬浮事件的处理函数中,通过JavaScript修改icon的样式属性来改变其背景颜色。下面是一个示例:
HTML代码:
```
<i id="my-icon" class="fa fa-star"></i>
```
CSS代码:
```
#my-icon {
background-color: #ccc;
}
```
JavaScript代码:
```
var icon = document.getElementById("my-icon");
icon.addEventListener("mouseover", function() {
// 当鼠标悬浮在icon上时执行的代码
icon.style.backgroundColor = "#f00"; // 设置背景颜色为红色
});
icon.addEventListener("mouseout", function() {
// 当鼠标离开icon时执行的代码
icon.style.backgroundColor = "#ccc"; // 恢复背景颜色为灰色
});
```
在这个例子中,我们在CSS中为icon设置了初始的背景颜色为灰色,然后通过JavaScript的addEventListener()方法监听了icon的mouseover和mouseout事件。当鼠标悬浮在icon上时,我们的代码将会将其背景颜色设置为红色;当鼠标离开icon时,我们的代码将恢复其背景颜色为灰色。你可以根据需要修改代码中的颜色值和事件处理函数来实现你想要的效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)