javascript如何给icon设置悬浮事件
时间: 2023-12-13 07:03:41 浏览: 34
要给icon设置悬浮事件,可以使用JavaScript的addEventListener()方法来监听鼠标悬浮事件。下面是一个简单的例子:
HTML代码:
```
<i id="my-icon" class="fa fa-star"></i>
```
JavaScript代码:
```
var icon = document.getElementById("my-icon");
icon.addEventListener("mouseover", function() {
// 当鼠标悬浮在icon上时执行的代码
console.log("鼠标悬浮在icon上了!");
});
```
在这个例子中,我们首先通过getElementById()方法获取了ID为"my-icon"的icon元素,并使用addEventListener()方法来监听它的mouseover事件。当鼠标悬浮在icon上时,我们的代码将会输出一条消息到浏览器的控制台中。你可以将这个事件处理函数替换为你自己的代码,以实现你想要的效果。
相关问题
javascript如何给icon设置悬浮事件,并给其设置背景颜色
要给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时,我们的代码将恢复其背景颜色为灰色。你可以根据需要修改代码中的颜色值和事件处理函数来实现你想要的效果。
javascript如何给icon设置悬浮移出事件,并给其设置背景颜色
要给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)