<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>*{ marign: 0; padding: 0;}.box{ width: 500px; height: 100px; margin: 0 auto; }li{ width: 50px; height: 30px; border: solid #000 1px; float: left; list-style: none; margin-right: 15px; }.showmenu{ border: #000 solid 1px; width: 200px; display: none; }</style><script>function getByClass(cls){ var eles = []; var elements = document.getElementsByTagName('*'); for(var i = 0; i < elements.length; i++){ if(elements[i].className == cls){ eles.push(elements[i]); } } return eles;}window.onload = function(){ var s = getByClass('li'); s.onmouseover = changeshow; s.onmouseout = noneshow;}function changeshow(){ var p = getByClass('showmenu'); p.style.display = "";}function noneshow(){ var p = getByClass('showmenu'); p.style.display = "none";}</script></head><body><div class="box"> <ul> <li>菜单1</li> <li>菜单2</li> <li>菜单3</li> <li>菜单4</li> <li>菜单5</li> </ul></div><div class="showmenu"> <div class="show1"> 鼠标经过li标签后应该显示的 </div></div></body></html>
4 回答
MarlboroKay
TA贡献189条经验 获得超236个赞
首先，你的代码
var s = getByClass('li');中存在问题，因为html结构中没有为 li 的样式，这直接导致你的功能无法运行。
其次，你在css中已经书写了display的效果，js中只用去修改对应得className即可，不用这么复杂。
望采纳，谢谢
添加回答
举报
0/150
提交
取消