HTML网页布局里，鼠标放上去时，页面如何实现导航栏下面内容的切换（HTML+CSS网页布局）

1、利用css的:hover

这是原本的div层

<div?id="show">

<p>这是鼠标移动上去后的div层</p>

</div>

</div>?

<style?type="text/css">

*{

margin:?0;

padding:?0;

}

#content{

background:#0CF;

height:200px;

width:200px;

margin-left:?20px;

margin-top:?20px;

}

#show{

width:200px;

height:200px;

margin-top:?20px;

background:#F09;

top:0px;

position:absolute;

opacity:?0;

display:?block;

font-size:?12px;

transition:?0.3s;

-webkit-transition:?.5s;

-moz-transition:?.5s;

}

#content:hover?#show{

color:?#656e73;

opacity:?1;

}

</style>