-
## 知識點 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. 中文字符自動換行的問題，這個只要加上寬度也就可以了?；蛘邚娭撇粨Q行。 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
提交
取消