<html>
<head>
<title></title>
<meta charset="UTF-8" />
<style type="text/css">
.box1 {
width: 300px;
height: 300px;
background: red;
}
.box1:hover {
background: blue;
// 鼠标放到box1上hover的时候可以把box1的'red'改为‘blue’
}
</style>
</head>
<body>
<p class="box1">
</p> //////////////
<style type="text/css">
//下面只是改变了css样式，
.box1 {
width: 300px;
height: 300px;
background: red;
display: none;
}
.box1:hover {
//当把box1的display属性设置为none的时候，鼠标移动上去，不能改变display属性，
//box1还是不会出现
background: blue;
display: block;
}
body:hover .box1 {
//如果用box1的父级body 去hover box1此时可以把box1的display属性改为
//block
display: block;
}
</style>
</body>
</html>
