悬停状态下图像不透明的问题 [英] Issues in image opacity in hover state

问题描述

 
 
 code>< div class =col-3> 
< div class =popular> < a href =＃>< img src =http://s10.postimg.org/4zqkz9rxl/saina_2.png/>< / a>< / div> 
 
< / div> 
  

css：

  div.col-3 {
 -webkit-column-count：3; 
 -webkit-column-gap：10px; 
 -moz-column-count：3; 
 -moz-column-gap：10px; 
列数：3; 
 column-gap：10px; 
 margin：20px 30px; 
} 
 .popular：悬停{
不透明度：0.7; 
背景颜色：＃FF1493; 
} 
  

这是我的jsfiddle： http://jsfiddle.net/7sbw18j0/

当我悬停图片时，它不会显示出不透明的粉红色。

任何人都可以帮助我吗？

解决方案

检查此：

HTML

 < div class =col-3> 
< div class =popular> < a href =＃>< img src =http://s10.postimg.org/4zqkz9rxl/saina_2.png/>< / a> 
< / div> 
< / div> 
  

CSS

  div.col-3 {
 -webkit-column-count：3; 
 -webkit-column-gap：10px; 
 -moz-column-count：3; 
 -moz-column-gap：10px; 
列数：3; 
 column-gap：10px; 
 margin：20px 30px; 
} 
 .popular {
 overflow：hidden; 
} 
 .popular：hover {
 background：＃FF1493; 
} 
 .popular：hover img {
 opacity：0.7; 
} 
  

小提琴演示

Here is my html and css code for hover state.

Html:

<div class="col-3">
               <div class="popular"> <a href="#" ><img src="http://s10.postimg.org/4zqkz9rxl/saina_2.png"/></a></div>

    </div>

css:

div.col-3 {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    column-count:3;
    column-gap:10px;
    margin:20px 30px;
}
.popular:hover {
opacity:0.7;
background-color:#FF1493;
}

Here is my jsfiddle: http://jsfiddle.net/7sbw18j0/

When i hover an image, it doesn't show like pink color with opacity.

Can anyone help me? Thanks in advance.

解决方案

Check this:

HTML

<div class="col-3">
    <div class="popular"> <a href="#"><img src="http://s10.postimg.org/4zqkz9rxl/saina_2.png"/></a>
    </div>
</div>

CSS

div.col-3 {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    column-count:3;
    column-gap:10px;
    margin:20px 30px;
}
.popular {
    overflow:hidden;
}
.popular:hover {
    background:#FF1493;
}
.popular:hover img {
    opacity:0.7;
}

Fiddle Demo

这篇关于悬停状态下图像不透明的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！