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

编程问答 2021-12-08

问题描述

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

  • CSS Only fiddle（仅适用于现代浏览器）
  • 基于JavaScript的jsfiddle（（可能）在所有常见的浏览器中都可以工作）

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

解决方法

我的问题..

我有许多图像（在超链接中），并且我希望每个图像在鼠标悬停时变暗（即，使用具有高不透明度或某些功能的黑色蒙版），然后在mouseout上恢复正常。但是我想不出最好的方法。

我试过了..

  • jQuery颜色动画和一些javascript参考。
  • 使用javascript设置图像的不透明度。

我不要

  • 图像从80％的不透明度开始，然后在鼠标悬停时达到100％（这很容易）。
  • 要在2张图像之间切换（一亮一暗），请对不起。

重申一下..

我希望图像（包括超链接）在鼠标悬停时变暗，然后在鼠标悬停时失去其暗度。

有什么想法吗？

更新：

这是我从建议中取得的进步。在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>

有什么想法吗？

-李

回答

我正在使用它（似乎可以在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>