首页 > 代码库 > 如何用css3实现动态下拉框

如何用css3实现动态下拉框

2024-09-06 08:10:24   215人阅读

<style>* { margin: 0px; padding: 0px; font-family: "微软雅黑"; list-style: none; text-decoration: none } .test { width: 200px; height: 20px; background-color: greenyellow } .test:hover { height: 200px; background-color: green }</style>
                                                           

例如上面就是一个动态下拉框（虽然我添加了transition但是网页并没有给我体现出来），实现的方法就是首先将div块的高度设置为初始高度（20px），然后使用hover伪类事件，设置当鼠标指上时高度变化为200px。这样就能实现动态下拉框的效果。

需要注意的是transition属性的使用。

并且如果里面包含其他模块的话，注意使用overflow: hidden;隐藏起来，不然无法达到效果。

测试代码如下

<style><!--
*{
	margin: 0px;
	padding: 0px;
	font-family: "微软雅黑";
        transition: all 1.5s ease;
}
.test{
	width: 200px;
	height: 20px;
	background-color: greenyellow;
}
.test:hover{
	height:200px;
	background-color: green;
}
--></style>
<div class="test">
</div>

 

如何用css3实现动态下拉框


联系
我们