用a伪类的后代标签实现鼠标放到图片上产生背景颜色变化

     这几天一直在做项目，碰到网站上很多见的鼠标放到图片上产生背景颜色变化的效果，因为还没有学JS，就用CSS实现了这种效果，总结了2种方法，拿出来跟大家分享一哈！

效果图：

　　可以明显看到这几张图片是放到一个透明的背景上的，图片上也被蒙了一个透明图层，把鼠标放到图片上的时候图片上面的那个图层为完全透明。第一种方法：可以把这个透明背景截图下来，用PS把上面的图片刷掉，直接把这个透明背景图层当成一个背景使用，然后使用a标签：将a标签设置成块属性，背景设置为图片

，在a标签里面嵌套span标签，设置span的hover.代码如下：CSS部分

：a{width:?;height:?; float:?;background:url();}a span{width:?;height:?; float:?; background-color:?;opacity: ?;filter:alpha(opacity=?);}a:hover span{width:?;height:?; float:?; opacity: ?;filter:alpha(opacity=?)}

　　这种方法比较好理解，缺点就是使用的图片过多，如果背景图层很大的话，我觉得用这种方法就不适合了。第二种方法：直接设置背景图层的透明度，a标签的思路还是和第一种是一样的，这时候就出现一个问题：按照上一种的方法，我们是把span嵌套在a标签里，实现图片的透明度变化的，但是第二种方法中，我们已经设置背景图层的透明度了，如果将a和span都嵌套在背景图层里的话，a和span会继承父标签的透明设置，使得图片始终都蒙上一层灰色的图层，既然这样的话，我们需要找到一个解决办法，如果我们把背景图层与a和span设置为兄弟标签的话会是什么效果呢？事实证明这种方法是可行的，一切都设置好了，这时候又发现了浏览器兼容的问题，在IE浏览器中效果很理想，但是在火狐中就不行了（火狐中图片始终都蒙上一层灰色的图层），这该怎么办呢？我左思右想，费了九牛二虎之力，终于想到了一个办法：我可以把这2个兄弟标签放到一个div里，然后用定位解决，设置div为相对定位和z-index:0，那2个兄弟标签都设置为absolute和z-index:1，结果效果真的很理想，拿出来代码方便大家理解：css部分：

.content_mjsp_dw{width:727px;height:127px;clear:both;float:left;position:relative;z-index:0;display:inline;margin-top:-10px;margin-left:70px;display:inline;}
.content_mjsp_ul_li3_a2{width:727px;height:127px;background-color:#22272e;position:absolute;z-index:0;opacity:0.6;filter:alpha(opacity=60);}
.content_mjsp_ul_li3_bh{width:723px;height:116px;position:absolute;z-index:1;padding-top:5px;padding-left:4px;}
.content_mjsp_ul_li3_a3{width:142px;height:121px;display:block;float:left;background:url(../images/content_masp_3.jpg);margin-right:2px;}
.content_mjsp_ul_li3_a3 span{width:142px;height:121px;display:block;float:left;background-color:#22272e;opacity:0.6;filter:alpha(opacity=60);}
.content_mjsp_ul_li3_a3:hover span{width:142px;height:121px;display:block;float:left;opacity:0;filter:alpha(opacity=0);}.content_mjsp_ul_li3_mr{width:142px;height:121px;display:block;float:left;background:url(../images/content_masp_3.jpg);margin-right:2px;}
.content_mjsp_ul_li3_mr span{width:142px;height:121px;display:block;float:left;background-color:#22272e;opacity:0;filter:alpha(opacity=0);}
.content_mjsp_ul_li3_mr:hover span{width:142px;height:121px;display:block;float:left;opacity:0;filter:alpha(opacity=0);}

html部分：

View Code

 1 <div class="content_mjsp_dw">
 2     <div class="content_mjsp_ul_li3_a2"></div>
 3     <div class="content_mjsp_ul_li3_bh">
 4      <a href="###" class="content_mjsp_ul_li3_a3">
 5       <span>&nbsp;</span>
 6      </a>
 7      <a href="###" class="content_mjsp_ul_li3_mr">
 8       <span>&nbsp;</span>
 9      </a>
10      <a href="###" class="content_mjsp_ul_li3_a3">
11       <span>&nbsp;</span>
12      </a>
13      <a href="###" class="content_mjsp_ul_li3_a3">
14       <span>&nbsp;</span>
15      </a>
16      <a href="###" class="content_mjsp_ul_li3_a3">
17       <span>&nbsp;</span>
18      </a>
19     </div>
20    </div>

喜欢尝试的小盆友，可以试一下我的第二种方法哦~~

 

 

 

转载于:https://www.cnblogs.com/xiamigongcheng/archive/2012/08/08/2628551.html