BBYR Achieve
返回信息流
这是一条镜像帖。来源:北邮人论坛 / www-technology / #22699同步于 2014/1/5
该镜像源已超过 30 天没有更新,可能在源站已被删除。
WWWTechnology机器人发帖

[问题]求问这段代码的问题在哪?

yayan
2014/1/5镜像同步17 回复
想实现:当鼠标放到“首页、登录、注册”上面时,显示“欢迎和工作原理”这个div。但怎么也出不来,不知道问题在哪? 用chrome试的 <div class="tab_nav"> <div class="width_center"> <a href="###"><img src="./img/logo.png" /></a> <ul id="tabIcon" class="font_yahei"> <li><a href="###" id="q10000" class="tabon">首页</a></li> <li><a href="###" id="q10001">登录</a></li> <li><a href="###" id="q10002">注册</a></li> </ul> </div> </div> <div class="second_levelmenu" id="secondlv10000"> <a href="###">欢迎</a> <span style="color:#CCC; margin:0 10px 0 10px;">|</span> <a href="###">工作原理</a> <span style="color:#CCC; margin:0 10px 0 10px;">|</span> </div> CSS样式如下: .second_levelmenu{ font-size: 12px; height: 30px; border: 2px solid #d7e8c2; background: #fff; color: #333; position: absolute; top:78px; left: -1000em; padding: 0 10px 0 10px; border-radius: 6px; } #tabIcon a:hover .second_levelmenu{ left: 579px; }
订阅后,新回复会通过你的通知中心匿名送达。
9 条回复
zzjin机器人#1 · 2014/1/5
#tabIcon a:hover .second_levelmenu 这个选择器选择的是#tabIcon a子层里面.second_levelmenu类,但是你的dom结构a已经是最后一级了,所以找不到被忽略掉了,这种dom结构只能用js实现hover变化
yayan机器人#2 · 2014/1/5
懂了,多谢~~~ 可是写了几个js怎么试都不成功,例如<script type="text/javascript"> document.getElementById("q10000").onmousemove(function(){ window.alert("hi"); $(".second_levelmenu").css({"left:46px"}); }); </script> 是为什么呢? 【 在 zzjin 的大作中提到: 】 : #tabIcon a:hover .second_levelmenu 这个选择器选择的是#tabIcon a子层里面.second_levelmenu类,但是你的dom结构a已经是最后一级了,所以找不到被忽略掉了,这种dom结构只能用js实现hover变化
weiyitheonly机器人#3 · 2014/1/5
onmousemove不是原生的js方法吧。。。 lz是用了jquery吗?
chen918机器人#4 · 2014/1/6
请把second_levelmenu放在ul里面,然后就可以用hover了, 不过不要用a,用li
yayan机器人#5 · 2014/1/6
是原生的 不过用错了 这个是鼠标移动 好像应该用onmouseover 【 在 weiyitheonly 的大作中提到: 】 : onmousemove不是原生的js方法吧。。。 lz是用了jquery吗?
yayan机器人#6 · 2014/1/6
啊 可以这样吗? 而且我试过 没有成功。。。 【 在 chen918 的大作中提到: 】 : 请把second_levelmenu放在ul里面,然后就可以用hover了, 不过不要用a,用li
weiyitheonly机器人#7 · 2014/1/6
lz 你用的是jQuery的写法,onmousemove是原生的,但是不是方法,是属性。 PS:试试我这个代码: <div class="tab_nav"> <div class="width_center"> <a href="###"><img src="./img/logo.png" /></a> <ul id="tabIcon" class="font_yahei"> <li><a href="###" id="q10000" class="tabon">首页</a></li> <li><a href="###" id="q10001">登录</a></li> <li><a href="###" id="q10002">注册</a></li> </ul> </div> </div> <div class="second_levelmenu" id="secondlv10000"> <a href="###">欢迎</a> <span style="color:#CCC; margin:0 10px 0 10px;">|</span> <a href="###">工作原理</a> <span style="color:#CCC; margin:0 10px 0 10px;">|</span> </div> <style type="text/css"> .second_levelmenu{ font-size: 12px; height: 30px; border: 2px solid #d7e8c2; background: #fff; color: #333; position: absolute; top:78px; left: -1000em; padding: 0 10px 0 10px; border-radius: 6px; } </style> <script type="text/javascript"> var as = document.getElementsByTagName('a'); for(var i = 0; i < as.length; i++) { as.item(i).onmouseover = function(){ document.getElementById('secondlv10000').style.cssText = 'left:579px;'; } as.item(i).onmouseleave = function(){ document.getElementById('secondlv10000').style.cssText = ''; } } </script>
weiyitheonly机器人#8 · 2014/1/6
【 在 weiyitheonly 的大作中提到: 】 : lz 你用的是jQuery的写法,onmousemove是原生的,但是不是方法,是属性。 : PS:试试我这个代码: : <div class="tab_nav"> : ................... 当然你要是用了jQuery 这段js可以写得更简单
yayan机器人#9 · 2014/1/6
非常感谢啊~~ 明白了一些 , 扩充了一下代码 ,貌似这句出了问题:ad2[i].style.cssText = "left:575px"; 效果没有出来。但不知道怎么改。 代码如下:<div class="tab_nav"> <div class="width_center"> <a href="###"><img src="./img/logo.png" /></a> <ul id="tabIcon" class="font_yahei"> <li><a href="/" id="q10000" class="tabon">首页</a></li> <li><a href="###" id="q10001">注册</a></li> <li><a href="###" id="q10002">登录</a></li> </ul> </div> </div> <div id="second_level"> <div class="second_levelmenu" id="10000"> <a href="###">欢迎</a> <span style="color:#CCC; margin:0 10px 0 10px;">|</span> <a href="###">工作原理</a> </div> <div class="second_levelmenu" id="10001"> <a href="###">法律政策</a> <span style="color:#CCC; margin:0 10px 0 10px;">|</span> <a href="###">资费说明</a> </div> <div class="second_levelmenu" id="10002"> <a href="###">关于我们</a> <span style="color:#CCC; margin:0 10px 0 10px;">|</span> <a href="###">招贤纳士</a> </div> </div> 【 在 weiyitheonly 的大作中提到: 】 : : 当然你要是用了jQuery 这段js可以写得更简单