js鼠标移入第i个li就显示第i个div,默认不显示，div在li的里面

时间: 2024-02-21 10:56:48 浏览: 80

鼠标放上去显示div

4星 · 用户满意度95%

在网页设计中，"鼠标放上去显示div"是一种常见的交互效果，它通常通过JavaScript和HTML的div元素来实现。div是HTML中的一个区块级元素，用于组织和布局页面内容。当我们想要在用户将鼠标悬停在某个元素上时显示额外的信息，我们可以利用CSS来隐藏这个div，然后通过JavaScript事件监听器在鼠标悬停事件触发时显示它。我们需要创建一个div，并将其样式设置为默认隐藏。在HTML中，可以这样写： ```html <div id="hoverDiv" style="display: none;">这里是你想显示的内容</div> ``` 接下来，我们需要使用JavaScript来监听鼠标悬停事件。这里我们以`<a>`标签为例，因为经常会在链接上实现这种效果： ```html <a href="#" id="hoverElement">鼠标放上来</a> ``` 然后在JavaScript中添加事件监听器： ```javascript document.getElementById('hoverElement').addEventListener('mouseover', function() { document.getElementById('hoverDiv').style.display = 'block'; }); document.getElementById('hoverElement').addEventListener('mouseout', function() { document.getElementById('hoverDiv').style.display = 'none'; }); ``` 这段代码会监听`hoverElement`元素的`mouseover`事件，当鼠标移入时，显示`hoverDiv`；当鼠标移出时，隐藏`hoverDiv`。注意，这里的`mouseout`事件是为了在鼠标离开`hoverElement`时恢复初始状态。除了上述的基本实现，还可以通过CSS3添加过渡效果，使得显示和隐藏的过程更加平滑： ```css #hoverDiv { display: none; transition: all 0.3s ease; /* 添加过渡效果，0.3秒内完成显示或隐藏 */ } #hoverDiv.show { display: block; } ``` 然后修改JavaScript来切换`show`类： ```javascript document.getElementById('hoverElement').addEventListener('mouseover', function() { document.getElementById('hoverDiv').classList.add('show'); }); document.getElementById('hoverElement').addEventListener('mouseout', function() { document.getElementById('hoverDiv').classList.remove('show'); }); ``` 在这个例子中，`3.html`、`1.html`和`2.html`可能是包含不同实现或者示例的网页文件，每个文件可能展示了如何在不同场景下应用这个效果，例如在不同的元素类型上，或者结合其他CSS属性来实现更复杂的效果。 "鼠标放上去显示div"是一个实用的网页交互功能，通过结合HTML、CSS和JavaScript，我们可以创造出丰富的用户体验。同时，这也涉及到前端开发的基础知识，包括DOM操作、事件监听以及CSS样式控制。理解并掌握这些技术对于提升网页的互动性和用户体验至关重要。

好的，针对你的问题，可以使用如下的JavaScript代码实现： ```html <!DOCTYPE html> <html> <head> <title>鼠标移入li显示对应的div</title> <style> ul { list-style: none; margin: 0; padding: 0; } li { display: inline-block; padding: 10px; background-color: #ccc; margin-right: 10px; cursor: pointer; } li:hover { background-color: #aaa; } li.active { background-color: #f00; } .div-container { display: none; } .div-container.active { display: block; } </style> </head> <body> <ul> <li>菜单1 <div class="div-container">菜单1的内容</div> </li> <li>菜单2 <div class="div-container">菜单2的内容</div> </li> <li>菜单3 <div class="div-container">菜单3的内容</div> </li> </ul> <script> var lis = document.querySelectorAll('li'); var divs = document.querySelectorAll('.div-container'); for (var i = 0; i < lis.length; i++) { lis[i].index = i; // 保存索引信息 lis[i].onmouseover = function() { // 隐藏所有的div for (var j = 0; j < divs.length; j++) { divs[j].classList.remove('active'); } // 显示对应的div divs[this.index].classList.add('active'); // 添加选中状态 this.classList.add('active'); } lis[i].onmouseout = function() { // 隐藏所有的div for (var j = 0; j < divs.length; j++) { divs[j].classList.remove('active'); } // 取消选中状态 this.classList.remove('active'); } } </script> </body> </html> ``` 这段代码使用了JavaScript实现了鼠标移入li时显示对应的div的效果。具体实现方式是：给每个li元素绑定onmouseover和onmouseout事件，当鼠标移入li时，显示对应的div，同时给li添加选中状态；当鼠标移出li时，隐藏所有的div，取消li的选中状态。

阅读全文

js鼠标移入第i个li就显示第i个div,默认不显示，div在li的里面

相关推荐

鼠标移上显示一个div的代码

鼠标移动到div上显示制定信息或者div（自适应显示位置）

js鼠标移入第i个li就显示第i个div,默认不显示

js 实现 鼠标移入移出时颜色变化

【JavaScript源代码】js实现鼠标移入移出卡片切换内容.docx

JavaScript实现类似拉勾网的鼠标移入移出效果

鼠标经过显示隐藏div

div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题

div+CSS 多排多列的显示东西．不使用LI

CSS定义Div区域的LI列表响应鼠标变色.rar

鼠标移到导航当前位置的LI变色处于选中状态

javascript实现鼠标移到Image上方时显示文字效果的方法

js判断鼠标同时离开两个div的思路及代码

javascript实现鼠标点击页面 移动DIV

jQuery九宫格鼠标移入方向感知特效

vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法

基于jquery的仿百度的鼠标移入图片抖动效果

js 动态添加元素(div、li、img等)及设置属性的方法

DIV+CSS+JS二级树型菜单，ul li展开后刷新无影响

最新推荐

里面的div怎么撑开外面的div让高度自适应

当鼠标移动到图片上时跟随鼠标显示放大的图片效果

js实现二级菜单点击显示当前内容效果

使用Vue中 v-for循环列表控制按钮隐藏显示功能

vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作

C语言数组操作：高度检查器编程实践

管理建模和仿真的文件

【KUKA系统变量进阶】：揭秘从理论到实践的5大关键技巧

如何使用Python编程语言创建一个具有动态爱心图案作为背景并添加文字'天天开心（高级版）'的图形界面？

基于Swift开发的嘉定单车LBS iOS应用项目解析

js 实现鼠标移入移出时颜色变化

javascript实现鼠标点击页面移动DIV