css3鼠标移入隐藏显示 |只供ie认识的css

.box{
width: 300px;
height: 200px;
background-color: #f2f2f2;
overflow: hidden;
}
.box:hover .content{
display: block;
}
.content{
display: none;
width: 100%;
height: 100%;
position: relative;
}

以上代码实现了鼠标移入box元素时，将content元素显示出来的效果。首先，大家给box元素设置了一个固定的宽度和高度，并将overflow属性设置为hidden，这样content元素就超出了box元素的范围，不会影响到box元素的布局。

接下来，大家对content元素进行了如下的样式设置：

• 将display属性设置为none，达到初始情况下该元素隐藏的效果
• 将width和height设置为100%，以确保该元素占据box元素的全部区域
• 将position属性设置为relative，以便将该元素相对于box元素进行定位

最后，通过:hover伪类选择器，大家监听了box元素的鼠标移入事件，当鼠标移入时，将content元素的display属性设置为block，从而达到了content元素显示的效果。

需要注意的是，以上代码中的box和content元素均可自行替换，只要保证content元素在box元素内部，且未超出box元素的范围即可。