如何在鼠标悬停时使图像变暗？

我的问题..

我有许多图像(内部超链接),我希望每个图像在鼠标悬停时变暗(即应用具有高不透明度的黑色面具或其他东西),然后在mouseout上恢复正常.但我无法弄清楚最好的方法.

我试过了..

Jquery颜色动画和一些JavaScript引用.

使用javascript设置图像的不透明度.

我不想..

图像从80%不透明度开始,然后在鼠标悬停时变为100%(这很容易).

要在2张图片(一盏灯和一盏黑))之间切换,忘记提及此对不起..

重申..

我希望图像(插入超链接)在鼠标悬停时变暗,然后在mouseout上失去它的黑暗.

思考？

更新:

这是我从建议中取得的进展.在IE8中看起来很好,但在FF3中看起来不行

思考？

- 李

回答

我要用这个(似乎在IE8和FF中工作)

fresskoma.. 64

或者,类似于erikkallen的想法,将A标签的背景设为黑色,并使图像在鼠标悬停时变为半透明.这样你就不必创建额外的div了.

CSS Only Fiddle(仅适用于现代浏览器)

基于JavaScript的小提琴(将[可能]在所有常见浏览器中工作)

基于CSS的解决方案的来源:

a.darken {
    display: inline-block;
    background: black;
    padding: 0;
}

a.darken img {
    display: block;

    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

a.darken:hover img {
    opacity: 0.7;

}

和图像:

这绝对有效."没有工作"不是一个非常有用的问题描述,所以请提出更具体的内容或者没有人能够帮助你. (24认同)

Sabba Keynej.. 9

使图像100%明亮,使其清晰.然后在Img悬停时将其降低到你想要的任何亮度.

img {
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease;
}

img:hover {
   -webkit-filter: brightness(70%);
   filter: brightness(70%);
}

a.darken {
    display: inline-block;
    background: black;
    padding: 0;
}

a.darken img {
    display: block;

    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

a.darken:hover img {
    opacity: 0.7;

}

img {
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease;
}

img:hover {
   -webkit-filter: brightness(70%);
   filter: brightness(70%);
}

outerLink {
    overflow: hidden;
    position: relative;
}

outerLink:hover:after {
    background: #000;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
}