CSS下鼠标悬停在一个DIV时显示另外一个DIV，为何显示不出来？

Question

是我哪里写错了嘛？为什么third就是显示不出来呢？谢谢！
#sec{width:100px;height:30px;background-color:#A09C9C;}
#third{width:100px;height:30px;background-color:#A09C9C;float:left;display:none}
#sec:hover third{display:block}

<div id=sec>
123
</div>
<div id=third>
456
</div>

Answer 1

首先从代码上来讲，你最后的样式写法有错误，应该是#sec:hover #third{}这样才对。其次如果是用css来实施，#third必须是#sec的子孙元素，要不然是不能够成功的。你看最后一个的写法就代表了#third必然是#sec的子孙元素。
当然了，这种写法浏览器兼容性不是很好，IE就不要指望了，尤其版本之间差异还蛮大的。如果是为了学习那倒无所谓了

追问

那该怎么写才好？我其实是想让鼠标划过一级菜单时，显示一个DIV，里面有二级菜单。就是想把二级菜单做成很宽那种。谢谢！

追答

这个建议使用jquery吧，语法简单，功能强大。例如$("#third").css("display","block");
这个就是代表将#third设置显示，如果会css这个是很好理解了。假如说按照你现在的题意就应该是这样
$(document).ready(function(){
$("#sec").hover(function(){
$("#third").css("display","block");
},function(){
$("#third").css("display","none");
});
});
当然了，你要引用jquery库，希望帮助到你

Answer 2

亲，你的css中在#third的样式中，左后一个display，代表隐藏这个div，去掉就好了。

#third{width:100px;height:30px;background-color:#A09C9C;float:left;display:none}

追问

我是要先隐藏，再显示阿。。。晕。。。

追答

如果是这个效果

#sec:hover,#third:hover{display:block}

Answer 3

sec和third的父元素：hover #third{display:block;}

Answer 4

用jquery来实现多美 哈哈