js我这个li鼠标放上去后为什么背景颜色没有改变呢？？
哪里写的不对呢谢谢<html><head><styletype="text/css">#left,#middle,#right{margin-top:70px;}#top...
哪里写的不对呢 谢谢
<html>
<head>
<style type="text/css">
#left,#middle,#right{margin-top:70px;}
#top{z-index:999999;width:100%;height:50px;position:fixed;top:0;border:1px solid black;background:url(weibo.jpg) 23px center no-repeat;}
#txt1{float:left;border:none;outline:none;display:block;width:400px;height:30px;margin:10px 150px;line-height:20px;background:#f6f5ec;}
#left{width:12%;height:2000px;border:1px solid black;float:left;margin-right:37px;}
#middle{width:70%;height:2000px;border:1px solid black;float:left;position:relative;}
#right{width:12%;height:2000px;border:1px solid black;float:left;margin-left:37px;}
#ta{outline:none;width:95%;height:60px;margin:20px auto;display:block;}
li{list-style:none;}
#ul1{position:relative;left:20px;}
#ul1 li a{display:block;float:left;height:30px;line-height:30px;position:relative;top:-3;text-align:center;width:75px;}
a{text-decoration:none;color:#1d1626;}
#sx{position:relative;top:-4px;left:15px;}
#ss{top:10px;left:514px;position:absolute;z-index:999999;}
#tsecond{float:left;}
#tsecond li{display:block;float:left;position:relative;top:-10px;margin-left:20px;}
</style>
<script>
window.onload=function(){
var oTa=document.getElementById('ta');
var oTop=document.getElementById('top');
var oTxt1=document.getElementById('txt1');
var lis = document.getElementsByTagName ('li');
for (var i = 0; i< lis.length; i++) {
lis[i].onmouseover=function() {
this.style.backgroundColor="red"; //这里。。。。。。。。。。。。。。。。。。。。。。。
};
oTxt1.onfocus=oTa.onfocus=function setss(){
this.style.border="1px solid red";
this.value="";
}
oTxt1.onblur=function(){
this.style.border="";
this.value=" aaaa"
}
oTa.onblur=function(){
this.style.border="";
}
}
}
</script>
</head>
<body>
<div id="top">
<input type="text" value=" aaa" id="txt1">
<a href="#"><img id="ss" src="ss.jpg"></a>
<ul id="ul1">
<li><a href="#"><img src="shouye.jpg" style="position:relative;top:5px">首页</a></li>
<li><a href="#"><img src="faxian.jpg" style="position:relative;top:5px">发现</a></li>
<li><a href="#"><img src="youxi.jpg" style="position:relative;top:5px">游戏</a></li>
<li><a href="#"><img src="yonghu.jpg" style="position:relative;top:5px;">我爱你</a></li>
</ul>
<img id="sx" src="shuxian.jpg" style="float:left;position:relative;left:18px;">
<ul id="tsecond">
<li><a href="#"><img src="xiaoxi.jpg"></a></li>
<li style="top:-12px;"><a href="#"><img src="shezhi.jpg"></a></li>
<li style="top:-12px;" ><a href="#"><img src="xiewb.jpg"></a></li>
</ul>
</div>
<div id="left">
</div>
<div id="middle">
<textarea id="ta" style="resize:none" ></textarea>
</div>
<div id="right">
</div>
</body>
</html> 展开
<html>
<head>
<style type="text/css">
#left,#middle,#right{margin-top:70px;}
#top{z-index:999999;width:100%;height:50px;position:fixed;top:0;border:1px solid black;background:url(weibo.jpg) 23px center no-repeat;}
#txt1{float:left;border:none;outline:none;display:block;width:400px;height:30px;margin:10px 150px;line-height:20px;background:#f6f5ec;}
#left{width:12%;height:2000px;border:1px solid black;float:left;margin-right:37px;}
#middle{width:70%;height:2000px;border:1px solid black;float:left;position:relative;}
#right{width:12%;height:2000px;border:1px solid black;float:left;margin-left:37px;}
#ta{outline:none;width:95%;height:60px;margin:20px auto;display:block;}
li{list-style:none;}
#ul1{position:relative;left:20px;}
#ul1 li a{display:block;float:left;height:30px;line-height:30px;position:relative;top:-3;text-align:center;width:75px;}
a{text-decoration:none;color:#1d1626;}
#sx{position:relative;top:-4px;left:15px;}
#ss{top:10px;left:514px;position:absolute;z-index:999999;}
#tsecond{float:left;}
#tsecond li{display:block;float:left;position:relative;top:-10px;margin-left:20px;}
</style>
<script>
window.onload=function(){
var oTa=document.getElementById('ta');
var oTop=document.getElementById('top');
var oTxt1=document.getElementById('txt1');
var lis = document.getElementsByTagName ('li');
for (var i = 0; i< lis.length; i++) {
lis[i].onmouseover=function() {
this.style.backgroundColor="red"; //这里。。。。。。。。。。。。。。。。。。。。。。。
};
oTxt1.onfocus=oTa.onfocus=function setss(){
this.style.border="1px solid red";
this.value="";
}
oTxt1.onblur=function(){
this.style.border="";
this.value=" aaaa"
}
oTa.onblur=function(){
this.style.border="";
}
}
}
</script>
</head>
<body>
<div id="top">
<input type="text" value=" aaa" id="txt1">
<a href="#"><img id="ss" src="ss.jpg"></a>
<ul id="ul1">
<li><a href="#"><img src="shouye.jpg" style="position:relative;top:5px">首页</a></li>
<li><a href="#"><img src="faxian.jpg" style="position:relative;top:5px">发现</a></li>
<li><a href="#"><img src="youxi.jpg" style="position:relative;top:5px">游戏</a></li>
<li><a href="#"><img src="yonghu.jpg" style="position:relative;top:5px;">我爱你</a></li>
</ul>
<img id="sx" src="shuxian.jpg" style="float:left;position:relative;left:18px;">
<ul id="tsecond">
<li><a href="#"><img src="xiaoxi.jpg"></a></li>
<li style="top:-12px;"><a href="#"><img src="shezhi.jpg"></a></li>
<li style="top:-12px;" ><a href="#"><img src="xiewb.jpg"></a></li>
</ul>
</div>
<div id="left">
</div>
<div id="middle">
<textarea id="ta" style="resize:none" ></textarea>
</div>
<div id="right">
</div>
</body>
</html> 展开
1个回答
展开全部
代码是没有问题的，问题是你的css不对，li没有高度，导致你看不到。
在样式里这一行的后面
#ul1{position:relative;left:20px;}
给li加上一个浮动的样式
#ul1 li{float:left;}
这样li就有高度了，就能看到背景变化了
//另外你私信给我，因为你的设置，我没办法回复你
在样式里这一行的后面
#ul1{position:relative;left:20px;}
给li加上一个浮动的样式
#ul1 li{float:left;}
这样li就有高度了，就能看到背景变化了
//另外你私信给我，因为你的设置，我没办法回复你
追问
为什么加个float就有高度了？还有ul1的li背景有变化了 为什么tsecond这个ul的li背景没有变化呢?我也想让tsecond这个背景颜色也变
追答
不浮动无高度我也不太懂，css不是我的强项，我是专职js的。
另外我这里tsecond也是会变红的，可以看到，不知道你那里为什么看不到。可能是那个图片的大小正好是li的大小，导致你没看到，建议你用chrome的dev工具或firefox的firebug看一下。
来自：求助得到的回答
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
