hover中的小坑

来源:互联网 发布:你瞒我瞒网络链接 编辑:程序博客网 时间:2024/06/08 10:25

<html>

<head>

<title></title>

<metacharset="UTF-8"/>

<styletype="text/css">

.box1{

width:300px;

height:300px;

background: red;

}

.box1:hover{

background: blue;  // 鼠标放到box1上hover的时候可以把box1的'red'改为‘blue’

}

</style>

</head>

<body>

<divclass="box1">

</div>

</body>

</html>

//////////////

<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>


1 0
原创粉丝点击