鼠标移上去加一个遮罩和文字 

<style type="text/css">
.box{ 
  width:300px;
  height:200px;
  position:relative;
  background:red;
  cursor:pointer;
 }
.box .bmbox{ 
  width:300px; 
  height:200px; 
  background:black; 
  position:absolute; 
  bottom:0px; 
  left:0px; 
  display:none;
  font:12px/30px "宋体"; color:white;
  text-align:center;
 }
.box:hover .bmbox{
  width:300px; 
  height:200px; 
  background:blue; 
  position:absolute; 
  bottom:0px; 
  left:0px; 
  display:block;
  font:12px/30px "宋体"; color:white;
  text-align:center;
  filter:alpha(opacity=50);  
  -moz-opacity:0.5;  
  -khtml-opacity: 0.5;  
  opacity: 0.5;  
 }
</style>
</head>
 
<body>
 <div class="box">
  <div class="bmbox">图标</div>
 </div>
</body>

 

posted @ 2016-06-22 13:07  Victor——  阅读(401)  评论(0)  编辑  收藏  举报