js实现网页左侧导航条,鼠标经过显示隐藏的面板

<style>* {margin: 0;padding: 0;}#left_nav {position: relative;border: 1px solid #666;width: 150px;height: 100px;}#left_nav ul li {height: 25px;line-height: 25px;background-color: #333;color: #fff;}#left_nav ul li .pane {background-color: blue;display: none;position: absolute;top: 0;left: 150px;width: 100px;height: 100px;}#left_nav ul li:hover {background-color: orange;}</style>

<script>var li = document.querySelectorAll('li');for (var i = 0; i < li.length; i++) {li[i].onmouseover = function () {this.children[0].style.display = 'block';}li[i].onmouseout = function () {this.children[0].style.display = 'none';}}</script>

注：js中的鼠标经过事件与css中的伪类:hover的区别在于，css中的:hover只在鼠标经过时改变操作元素的样式，当鼠标移出时，样式又回到原来的样子，而js中要例外设置鼠标移出事件让元素样式变成原来的样子。

容易入的坑：
1、var li = document.querySelectorAll(‘li’);获取到li后不能直接给li加点击事件，因为这个li是一个包含很多li元素的数组，需要遍历一个一个的加。
2、在原生js中获取子元素很麻烦也容易出错，比如空格也是子元素，所以有时获取的不一定是自己想要的那个。（jquery很好的解决了这个问题）

js实现网页左侧导航条,鼠标经过显示隐藏的面板相关推荐

用jQuery实现一些导航条切换，显示隐藏
用jQuery实现一些导航条切换,显示隐藏,主要运用的技术有slideToggle( ),toggeClass( ),toggle( ): 源码下载地址代码如下: <!DOCTYPE html ...
隐藏导航条HTML,jQuery实现的导航条切换可显示隐藏
用jQuery实现一些导航条切换,显示隐藏,主要运用的技术有slideToggle( ),toggeClass( ),toggle( ): 代码如下: 导航条在项目中的应用 $(function(){ ...
Bootstrap导航条鼠标悬停下拉菜单
Bootstrap导航条鼠标悬停下拉菜单 Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹 ...
京东左侧导航条练习笔记
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
excel工作簿左侧导航条_Excel工作簿中的高效导航
excel工作簿左侧导航条 When I saw the signs in this shop window, I laughed, and snapped this picture. 当我在商店橱窗 ...
word 显示左侧导航条(目录条)
word 显示左侧导航条显示左侧导航条
javascript实现鼠标经过显示隐藏内容
html代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
CSS实线鼠标移入显示隐藏div
用CSS中的 hover 事件,实线鼠标移入显示隐藏元素. 效果如下: 代码如下: <!DOCTYPE html> <html><head><meta cha ...
CSS/HTML制作W3School网页的导航条
W3School原网页: 效果图: <!DOCTYPE html> <html lang="en"> <head><meta charse ...

js实现网页左侧导航条,鼠标经过显示隐藏的面板

js实现网页左侧导航条,鼠标经过显示隐藏的面板

js实现网页左侧导航条,鼠标经过显示隐藏的面板相关推荐

最新文章

热门文章