Day15-小功能系列:分别使用伪类和JavaScript做盒子的显示与隐藏

Day15-小功能系列:分别使用伪类和JavaScript做盒子的显示与隐藏

---

当鼠标移入时，则显示隐藏div。当鼠标移出时，则继续隐藏

---

使用伪类

1.HTML界面

<div class="main">
    	显示
    	<div class="display"></div>
</div>

2.Css界面

.main{
	width:100px;
	height:30px;
	margin:0 auto;
	text-align:center;
	position:relative;
	border:1px solid #000;
}
.display{
	width:300px;
	height:100px;
	display:none;
	background:#CCC;
	position:absolute;
}
.main:hover .display{
	display:block;
}

主要代码为最后一个.main:hover .display，即给main类添加伪类，鼠标移入则其子标签中的display类显示。

---

使用JavaScript

1.HTML界面

<div class="main">
    	显示
    	<div class="display"></div>
</div>

---

2.Css代码

.main{
	width:100px;
	height:30px;
	margin:0 auto;
	text-align:center;
	border:1px solid #000;
}
.display{
	width:300px;
	height:100px;
	display:none;
}

---

3.JavaScript代码

导入JQuery文件

<script type="text/javascript">
$(function(){
	$(".main").mouseover(function(){
		$(".display").css({display:"block"})
	});	
	$(".main").mouseout(function(){
		$(".display").css({display:"none"})
	});	
})
</script>

主要实现功能再JavaScript部分：给main类的div添加了移入(mouseover)和移出(mouseout)事件。然后再修改其display属性，实现显示和隐藏的效果

---

效果图

---