悬停时的颜色不饱和图像并在鼠标悬停时再次去饱和html5 css3

代码已准备就绪，但我希望图像在鼠标悬停时变为有颜色（即，删除IMG的灰度属性），并且当鼠标移出图像时应该获取灰度再次。悬停时的颜色不饱和图像并在鼠标悬停时再次去饱和html5 css3

如果这是不可能的只能通过CSS。 javascript也行，但请不要jquery，我不知道jquery。

的代码如下：

<style type="text/css"> 

#ajabox:hover #ajainner{ 
    height:100px; 
    top:-100px; 
} 

#ajainner{ 
    width:332px; 
    overflow:hidden; 
     height:0px; 
    background-image:url(../../images/bg_black_50.png); 
    position:relative; 
    top:-1px; 
    transition: top .4s ease-in, height .4s ease-in; 
    -ms-transition: top .4s ease-in, height .4s ease-in; 
    -webkit-transition: top .4s ease-in, height .4s ease-in; 
    -o-transition: top .4s ease-in, height .4s ease-in; 
    -moz-transition: top .4s ease-in, height .4s ease-in; 
} 

#ajabox{ 
    width:332px; 
    margin:0px; 
    padding:0px; 
    border:0px; 
    height:209px 
    display:-webkit-box; 
    display:box; 
    display:-moz-box; 
    display:-ms-box; 
    display:-o-box; 
    overflow:hidden; 
} 
span{ 
    color:#FFF; 
    font-family:Verdana, Geneva, sans-serif; 
    left:10px; 
    top:10px; 
    position:relative; 
} 
img.desaturate { 
    filter: grayscale(100%); 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    filter: url(desaturate.svg#greyscale); 
    -webkit-filter: grayscale(1); 
    filter: gray; 
} 

</style> 
<script type="text/javascript"> 
</script> 
<body bgcolor="#000000"> 
<div id="ajabox"> 
    <img src="http://fc03.deviantart.net/fs70/f/2011/123/c/9/adam_jensen__s_army_____________by_gtanmay-d3fh5pw.png" style="width:332px;" class="desaturate"/> 
    <div id="ajainner"> 
     <span>Adam Jensen's Army</span> 
     <br /> 
     <span style="font-size:12px">Made from the CD cover of "Assassin's Creed: Brotherhood"<br />Feat. Adam Jensen(Deus Ex: Human Revolution)</span> 
    </div> 
</div>

来源

2013-01-16 Tanmay Gawankar

img { /* Universal settings */ 
    -webkit-transition:all .4s; 
    -moz-transition:all .4s; 
    -ms-transition:all .4s; 
    -o-transition:all .4s; 
    transition:all .4s; 
} 
img:not(:hover) { 
    -webkit-filter:grayscale(100%); 
    -moz-filter:grayscale(100%); 
    -ms-filter:grayscale(100%); 
    -o-filter:grayscale(100%); 
    filter:grayscale(100%); 
} 
img:hover { 
    -webkit-filter:grayscale(0%); 
    -moz-filter:grayscale(0%); 
    -ms-filter:grayscale(0%); 
    -o-filter:grayscale(0%); 
    filter:grayscale(0%); 
}

的：不选择不会在旧的浏览器，但也不会过滤器，所以它不应该真正成为太大的问题。

Example Fiddle.

来源

2013-01-16 06:23:37 ddhboy

哦~~还有一个问题......所有其它图像得到了悬停性能的饱和度和饱和度......但与代码这么想的工作，我给:( –

如果你想让它一起工作你提供的例子，只需将img改为任何你试图定位的元素，在你的情况下它会是img.desaturate？所以img.desaturate，img.desaturate：not（：hover）和img.desaturate：悬停 – ddhboy

不幸的是，这个解决方案不适用于IE10及以上版本。 – muffir

悬停时的颜色不饱和图像并在鼠标悬停时再次去饱和html5 css3

回答

相关问题