如果想要做到鼠标移动到内容时再显示出来,可以利用元素转换实现。
首先,元素隐藏可以使用display:none;来实现隐藏元素。
<style>
/* 把ul列表隐藏 */
.hide{
display: none;
}
/* 通过元素转换把隐藏列表显示出来 */
.box:hover ul{
display: block;
}
.box{
background: #888;
}
</style>
</head>
<body>
<div class="box">
军事
<ul class="hide">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
实现效果很简单:
-
把需要隐藏的标签先隐藏起来。
-
通过元素转换把在哪个元素上需要展示的标签转换过来即可。