鼠标滑过列表样式改变
注意: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'; } } }