-
## 知识点 onmouseover 鼠标经过 onmouseout 鼠标移出 function 关键字 getElementsByTagName 获取一组标签 length 获取对象成员个数 **思路** 给一级菜单添加鼠标事件，经鼠标在一级菜单上时，显示下面的二级菜单。但是在处理二级菜单之前，先通过 length 判断一下有没有二级菜单。 为什么要判断？ 因为比如像 ```ul.getElementsByTagName('li')``` 这样的方式获取到的是所有 ul 下面的所有 li， 这个 li 可能有很多层。 ## 总结 *css 中的鼠标伪类已经注释了的 `ul li:hover ul{/* display: block; */}` ，现在是用 js 实现，所以用不着这个鼠标伪类了。* 通过这种方法写的 js 下拉菜单，可以避免 ie6 下的不支持非 a 标签伪类的情况。 window.onload=function(){ var a_li=document.getElementsByTagName('li'); for(var i=0;i<a_li.length;i++){ //获取 li 下面的 二级菜单 ul ， //如果能获取到的个数是 1 个以上， //条件成立，把 li 下面 的 二级菜单 ul 显示。 if(a_li[i].getElementsByTagName('ul').length){ a_li[i].onmouseover=function(){ this.getElementsByTagName('ul')[0].style.display="block" } a_li[i].onmouseout=function(){ this.getElementsByTagName('ul')[0].style.display="none" } } } }查看全部
-
## 原理 二级菜单，其实也就是给一级菜单中的其中一个里面再写一个列表。这个列表本来是隐藏 display:none 的，当鼠标移动到一级菜单 li:hover 上时，才显示这个列表。要二级菜单在子一级菜单的位置下，需要给一级菜单 li 设置相对定位。 ## 留下的问题 1. 中文字符自动换行的问题，这个只要加上宽度也就可以了。或者强制不换行。 2. 上面说到给子a标签添加`固定的宽度和高度`可以避免ie7下面的兼容问题，我们设置了80px的宽度，但是，如果子菜单里面的内容我们不知道，文字个数很多，超过了80px呢？ 3. 上面是在 li 标签上加的 hover 伪类事件，这个在 ie6 中是不可以的。 ie6 只运行 a 标签的伪类事件，而且 a 标签中最好不要包含块类元素。 最后有没有想说什么？做个菜单而已，明明可以很简单， ie7 的宽高问题， ie6 的伪类问题，弄得复杂了起来。这还只是个菜单而已，想想整个网站上的所有页面…… 如果要做好兼容性，复杂程度可想而知。 那么，为了我们的身心健康，为了向前发展的技术， `勇敢的对旧版本浏览器说 NO` 。查看全部
-
124580查看全部
-
absolute绝对定位：根据浏览器定位，默认浏览器的（0,0）位置。 absolute 和 relative（相对定位）相呼应。 隐藏：display:none;查看全部
-
csshover.htc引用方式查看全部
-
看了老师讲的三种下拉菜单显示隐藏的方法，觉得jQuery还是比较方便，以后可以多多联系jQuery！查看全部
-
以后在来学习这章查看全部
-
/*设置正常状态英文菜单隐藏*/ .top-nav li a span{ display:none; } /*鼠标移动到链接上面时将英文菜单显示*/ .top-nav li a:hover span{ display:block; } /*鼠标移动到链接上面时将中文菜单位置上移*/ .top-nav li a:hover{ margin-top:-20px; background:pink; color:black; }查看全部
-
<script type="text/javascript"> $(function(){ $(".navmenu").mouseover(function(){ $(this).children("ul").show(); }) $(".navmenu").mouseout(function(){ $(this).children("ul").hide(); }) }) </script> <li class="navmenu"><a href="#">课程大厅</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> </ul> </li>查看全部
-
<script type="text/javascript"> function ShowSub(li) { var subMenu =li.getElementsByTagName("ul")[0] ; subMenu.style.display = "block"; } function HideSub(li) { var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = " none"; } </script> <li onmouseover="ShowSub(this)" onmouseout="HideSub(this)"><a href="#">课程大厅</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">Html/CSS</a></li> </ul> </li>查看全部
-
*{ margin:0px; padding:0px;} #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;} ul{ list-style:none;} ul li{ line-height:40px; text-align:center; position:relative; float:left;} a{ text-decoration:none; color:#000; display:block; width:90px;} a:hover{ color:#FFF; background-color:#666;} ul li ul li{ float:none;margin-top:2px; background-color:#eee;} ul li ul{width:90px; position:absolute; display:none; } ul li:hover ul{display:block;} <ul> <li><a href="#">首页</a></li> <li><a href="#">课程大厅</a> <ul> <li><a>javascript</a></li> <li>jquery</li> </ul>查看全部
-
实现ie兼容 清除浮动 ---- zoom:1 边距 ---- _margin:0 高度 ---- _height:0 在ie10以上才能兼容css3 使用jQ实现兼容ie _margin 在IE6中能够识别 Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。 Zoom的使用方法： zoom : normal | number normal : 默认值。使用对象的实际尺寸 number : 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值 用白话讲解就是zoom:后面的数字即放大的倍数，可以是数值，也可以是百分比。如：zoom:1，zoom:120%。 而这个属性只要在IE中才起作用，所以很少用到它的实际用途，而最经常用到作用是清除浮动等 尖角实现： display:block;width:0; border-bottom:10px; solid red; border-left:10px solid green; border-right:10px solid blue; border-top:10px solid gray; 阴影： box-shadow:水平 垂直 模糊 颜色; rgba(255,255,255,.3) r:red g:green b:blue a:alpha 透明通道，0-1查看全部
-
box-shadow:0 1px 0 #111,0 2px 0 #666多个阴影可以叠加，这样产生的会有分隔线 线性渐变：linear-gradient(颜色1,颜色2) 边框圆角：border-radius:边框半径; 盒子阴影：box-shadow:水平位移 垂直位移 羽化范围 羽化颜色 文本阴影：text-shadow 同上 同时设置多种颜色盒子阴影，多组值之间使用“,”分隔 清除浮动 xxx:before,xxx:after{content:"";display:table} xxx:after{clear:both;} 背景渐变：background-image:linear-gradient(#444,#111); transition要配合hover使用 transition:all .2s ease ease-out ease-in ease-in-out... opacity:0;margin:20px 0 0 0; opacity:1;margin:0; box-shadow:0px 0px 3px red; 盒子阴影 ： 水平阴影 竖直阴影 阴影半径 颜色 overflow清除浮动的原因 是因为overflow除了(visible)会重新给他里面的元素建立块级格式化(block formatting context) floats, position absolute, inline-block, table-cell和table-caption都不是块级样式，所以才会用到clear来控制浮动 overflow也可以清除浮动是因为当在父级元素设置overflow时候，除了visible，就是只有auto, hidden或者scroll时候，也会建立新的块级格式给他的子元素, 从而起到清楚浮动效果。 如果想让某一段代码在前台不显示，最简单的方法是用css的display:none即可，这样下边的内容就自动上移或右侧的左移来填补这个空隙。但特殊情况下我们只需要隐藏这个元素， 但它的位置不能被占了，那该怎么实现呢？接下来我们来看css的另外一个属性Visibility属性。 visibility:隐藏对应的元素但不挤占该元素原来的空间。 display:隐藏对应的元素并且挤占该元素原来的空间。查看全部
-
box-shadow:1px 0 0 #444盒子阴影<br> 水平距离 垂直距离 模糊距离0 颜色<br> text-shadow:1px 0 0 #333文本阴影<br> visibility:hidden隐藏元素<br> 父盒子中写overflow:hidden清除子元素的浮动，避免因为子元素浮动，父元素的高度塌陷<br> >符号表示选择子一级的菜单，孙级的不会被选择<br> 如果要让子盒子相对于于父盒子定位，父盒子要相对定位，子盒子定义为绝对定位才会脱离文档流，不会把父盒子撑开<br> 使用css伪类清除本元素前后的浮动如下：<br> .top-nav:before,.top-nav:after{<br> content:" "; 在元素前后插入一个空内容块，并用table形式显示。.top-nav:before是为了浏览器兼容性，若不加，有的浏览器的ul下的li的高度会失效<br> display:table;<br> }<br> .top-nav:after<br> {<br> clear:both;<br> }<br> <br> .top-nav ul li:first-child > a ul下面的第一个子元素的子元素a查看全部
-
jq解决ie6 li:hover问题查看全部
举报
0/150
提交
取消