鼠标移动到一个div触发另一个div显示的代码
时间: 2024-03-02 20:53:27 浏览: 162
鼠标移上显示一个div的代码
4星 · 用户满意度95%
你可以使用JavaScript来实现鼠标移动到一个div触发另一个div显示的效果。以下是一个示例代码:
HTML代码:
```html
<div id="div1" onmouseover="showDiv()" onmouseout="hideDiv()">鼠标移动到我上面显示另一个div</div>
<div id="div2">这是另一个div</div>
```
JavaScript代码:
```javascript
function showDiv() {
var div2 = document.getElementById("div2");
div2.style.display = "block";
}
function hideDiv() {
var div2 = document.getElementById("div2");
div2.style.display = "none";
}
```
在上面的代码中,我们首先定义了两个div元素,一个是id为div1的div,另一个是id为div2的div。当鼠标移动到div1上时,调用showDiv()函数,将id为div2的div的display属性设置为"block",这将使其显示出来。当鼠标移出div1时,调用hideDiv()函数,将id为div2的div的display属性设置为"none",这将使其隐藏。
需要注意的是,在使用onmouseover和onmouseout事件时,需要将JavaScript代码写在HTML元素的属性中,这不是一个良好的编程实践。更好的方式是使用addEventListener()方法来添加事件监听器。
阅读全文