Question

我的问题..

我有许多图像（内部超链接），我希望每个图像在鼠标悬停时变暗（即应用具有高不透明度的黑色蒙版等），然后在mouseout上恢复正常。但我无法找到最佳方法。

我试过了..

Jquery颜色动画和一些javascript引用。
使用javascript设置图像的不透明度。

我不想......

图像从80％不透明度开始，然后在鼠标悬停时变为100％（这很容易）。
要在两张图片之间切换（一盏灯和一盏黑暗），忘记提及此抱歉..

重申..

我希望图像（插入超链接）在鼠标悬停时变暗，然后在mouseout上失去它的黑暗。

思想？

更新：

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

<html>
    <body>
        <a href="http://www.google.com" style="background-color:black; opacity:1;filter:alpha(opacity=100)">
            <img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200" 
            style="opacity:1;filter:alpha(opacity=100)" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" 
            onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" />
        </a>
    </body>
</html>

思想？

- 李

ANSWER

我正在使用它（似乎在IE8和FF中工作）

<html>
    <head>
        <style type="text/css">

        .outerLink 
        {
            background-color:black; 
            display:block; 
            opacity:1;
            filter:alpha(opacity=100);
            width:200px;
        }

        img.darkableImage 
        {
            opacity:1;
            filter:alpha(opacity=100);
        }
</style>
    </head>

    <body>
        <a href="http://www.google.com" class="outerLink">
            <img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200" 
            class="darkableImage" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" 
            onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" />
        </a>
    </body>
</html>

Answer 1

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

CSS Only Fiddle（仅适用于现代浏览器）
JavaScript based Fiddle（[可能]适用于所有常见浏览器）

基于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;

}

图片：

<a href="http://google.com" class="darken">
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
</a>

Answer 2

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

<img src="http://dummyimage.com/300x150/ebebeb/000.jpg">

那会这样做，希望有所帮助

Answer 3

我意识到这有点晚了但您可以在代码中添加以下内容。这不适用于透明的png，但是你需要一个裁剪蒙版。我现在要看到的。

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

Answer 4

在它上面放一个黑色的半透明div。

Answer 5

这个怎么样......

<style type="text/css">
    div.frame { background-color: #000; }
    img.pic:hover {
      opacity: .6;
      filter:alpha(opacity=60);
    }
</style>

<div class="frame">
    <img class="pic" src="path/to/image" />
</div>

Answer 6

使用50％透明度创建黑色png。在鼠标悬停时覆盖它。

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

6 个答案: