鼠标悬停html5 css3时悬停并降低饱和度的颜色去饱和图像

Question

The code is ready but I want the image to get colored (ie remove grayscale property of IMG) on mouse hover and when the mouse is out the image should get grayscale again. 代码准备就绪，但我希望鼠标悬停时图像变色（即删除IMG的灰度属性），当鼠标移出时，图像应再次变为灰度。

If it is not possible only by css. 如果不可能只通过CSS。 javascript is also ok but please no jquery, I don't know jquery. javascript也行，但请不要jquery，我不知道jquery。

The code is below: 代码如下：

<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>

Answer 1

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%);
}

The :not selector won't work in older browsers, but neither will filter, so it shouldn't really be much of a problem. ：not选择器不适用于旧浏览器，但也不会过滤，所以它不应该是一个很大的问题。

Example Fiddle. 示例小提琴。

鼠标悬停html5 css3时悬停并降低饱和度的颜色去饱和图像

问题描述

1 个解决方案

解决方案1
9 2013-01-16 06:23:37

鼠标悬停html5 css3时悬停并降低饱和度的颜色去饱和图像

问题描述

1 个解决方案

解决方案1 9 2013-01-16 06:23:37

解决方案1
9 2013-01-16 06:23:37