鼠标滑过列表样式改变

鼠标滑过列表样式改变

鼠标滑过列表样式改变

注意：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';
            }
        }
    }

 

posted on 2016-10-14 10:58 粽子丫丫 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/2390624885a/p/5959583.html