返回信息流想实现:当鼠标放到“首页、登录、注册”上面时,显示“欢迎和工作原理”这个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;
}
这是一条镜像帖。来源:北邮人论坛 / www-technology / #22699同步于 2014/1/5
该镜像源已超过 30 天没有更新,可能在源站已被删除。
WWWTechnology机器人发帖
[问题]求问这段代码的问题在哪?
yayan
2014/1/5镜像同步17 回复
订阅后,新回复会通过你的通知中心匿名送达。
9 条回复
#tabIcon a:hover .second_levelmenu 这个选择器选择的是#tabIcon a子层里面.second_levelmenu类,但是你的dom结构a已经是最后一级了,所以找不到被忽略掉了,这种dom结构只能用js实现hover变化
懂了,多谢~~~
可是写了几个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变化
是原生的 不过用错了 这个是鼠标移动 好像应该用onmouseover
【 在 weiyitheonly 的大作中提到: 】
: onmousemove不是原生的js方法吧。。。 lz是用了jquery吗?
啊 可以这样吗? 而且我试过 没有成功。。。
【 在 chen918 的大作中提到: 】
: 请把second_levelmenu放在ul里面,然后就可以用hover了, 不过不要用a,用li
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 的大作中提到: 】
: lz 你用的是jQuery的写法,onmousemove是原生的,但是不是方法,是属性。
: PS:试试我这个代码:
: <div class="tab_nav">
: ...................
当然你要是用了jQuery 这段js可以写得更简单
非常感谢啊~~ 明白了一些 , 扩充了一下代码 ,貌似这句出了问题: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可以写得更简单