鼠标滑过列表样式改变

鼠标滑过列表样式改变

注意：1、列表中的内容放在a标签中

　　　2、鼠标滑过改变样式都是体现在CSS中，而非需要JS来专门实现

 

Html ：

1 <div id="div1"></div>
2     <ul id="ul1">
3         <li><a href="javascript:;">宋体</a></li>
4         <li><a href="javascript:;">楷体</a></li>
5         <li><a href="javascript:;">微软雅黑</a></li>
6         <li><a href="javascript:;">仿宋</a></li>
7         <li><a href="javascript:;">黑体</a></li>
8     </ul>

CSS ：

ul{ list-style:none; margin:0; padding:0;}
a{ text-decoration:none;}
#div1{ width:200px; height:30px; border:1px solid orange;}
#ul1{ width:200px; border:1px solid orange; color:black; line-height:30px; display:none;}
#ul1 a:hover{ background:orange; color:#fff;}

 

JS :

window.onload = function(){
    var oDiv = document.getElementById(\'div1\');
    var oUl = document.getElementById(\'ul1\');
    
    //禁止冒泡
    oDiv.onclick = function(ev){
        var ev = ev || event
        ev.cancelBubble = true;
        oUl.style.display = \'block\';
        }
        
        
    document.onclick = function(){
        oUl.style.display = \'none\';    
        }
    
    for(var i = 0;i<oUl.children.length;i++){
        oUl.children[i].onclick = function(){
            for(var i = 0; i< oUl.children.length;i++){
                oUl.children[i].children[0].style.background = \'\';
                oUl.children[i].children[0].style.color = \'\';
                
                }
            oDiv.innerHTML = this.children[0].innerHTML;
            this.children[0].style.background = \'orange\';
            this.children[0].style.color = \'white\';
            }
        }
    }