js给两个不同的元素同时设置相同的hover事件
时间: 2024-02-20 14:02:03 浏览: 25
可以使用JavaScript来实现这个需求。首先,你需要获取这两个元素的DOM对象,然后使用addEventListener方法为它们添加mouseenter和mouseleave事件。在事件处理函数中,你可以使用this关键字来引用当前被hover的元素,然后为它们添加相同的CSS样式。
示例代码如下:
```javascript
// 获取两个元素的DOM对象
const element1 = document.getElementById('element1');
const element2 = document.getElementById('element2');
// 为它们添加事件监听器
element1.addEventListener('mouseenter', handleMouseEnter);
element1.addEventListener('mouseleave', handleMouseLeave);
element2.addEventListener('mouseenter', handleMouseEnter);
element2.addEventListener('mouseleave', handleMouseLeave);
// 定义事件处理函数
function handleMouseEnter() {
// 使用this关键字引用当前被hover的元素,添加CSS样式
this.style.background = 'blue';
}
function handleMouseLeave() {
// 使用this关键字引用当前被hover的元素,移除CSS样式
this.style.background = '';
}
```
上面的代码中,我们获取了ID为`element1`和`element2`的两个元素的DOM对象,并为它们添加了相同的mouseenter和mouseleave事件监听器。在事件处理函数中,我们使用了this关键字来引用当前被hover的元素,并为它们添加了相同的CSS样式。这样,当鼠标移入或移出这两个元素时,它们都会展现相同的效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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)