html>
background-clip.border,.padding,.content{/*给最外层的div设置样式*/
width:300px;height:300px;
float:left;margin-left:50px;
}
a{
text-decoration:none;
font-size:30px;
}
.div1,.div2,.div3{/*放置背景图片的div样式*/
width:220px;height:200px;
border:10px solid rgba(0,255,0,0.3);
padding:50px;
background-image:url("http://climg.mukewang.com/582c316e0001fd6507000210.jpg");
margin-top:50px;
}
.border:hover div,.padding:hover div,.content:hover div{
display:block;
}
/*补充代码*/
.border:hover .div1{
background-clip:border-box;
}
.padding:hover .div2{
background-clip: padding-box;
}
.content a:hover .div3{
background-clip: content-box;
}
border-box
padding-box
content-box
在原题演示效果上,鼠标是移动a标签的内容“***-box”上的,但是这里唯独line:34的地方,把hover加在a标签而不是.div上的时候,效果不反应了