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

Question

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

javascriptcss

32

我的问题..

我有许多图像（在超链接内），我希望每个图像在鼠标悬停时变暗（即应用高不透明度的黑色遮罩或其他东西），然后在鼠标移出时恢复正常。但我无法想出最好的方法。

我尝试过..

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

我不想..

图像从80％不透明度开始，然后在鼠标悬停时变为100％（这很容易）。
在两个图像之间交换（一个浅色和一个深色），忘了提到这点，抱歉..

再强调一遍..

我想要一个图像（在超链接内）在鼠标悬停时变暗，然后在鼠标移出时恢复正常。

有什么想法吗？

更新：

这是根据建议进行的进展。在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>

有什么想法？

-- Lee

回答

我选择这个（在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>

- Lee Englestone

有没有选项可以拥有两个不同的图像，一个是浅色的，一个是深色的？ - MalphasWats

抱歉 Malphas，我在问题中忘记提到我不想这样做了，感谢你的回答。 - Lee Englestone

如果你的“尝试过了，但没用”（9_9难道你不认为你可以提供更多关于你尝试了什么以及发生了什么的信息吗？）场景没有起作用，那么可能是因为你的链接和图像元素设置为CSS display:block 而不是它们的默认值 display:inline。默认设置可能会将一些问题的效果限制在行内元素的行高上。 - eyelidlessness

谢谢eyelidlessness。block:inline帮助了我解决了我的问题。 :-) - Lee Englestone

6个回答

11

将图片的亮度调整到100%，这样它就清晰可见了。然后，在鼠标悬停在图片上时，将其减少到所需的亮度。

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

就这样吧，希望有所帮助。

- Sabba Keynejad

你应该把过渡效果移到 img {} 中，这样就不必添加 filter: brightness(100%)。 - poxip

5

我知道有点晚了，但你可以在你的代码中添加以下内容。这对于透明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%;
}

- Sam Collins

3

这个怎么样...

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

- Ei Maung

谢谢Ei，这在FF中似乎很好用，但在IE8中不行。你有什么想法吗？ - Lee Englestone

使用Jquery，您将获得一个在几乎所有浏览器中都能跨浏览器工作的解决方案。$('#id_of_div').css('opacity',.6); - Brian Leishman

2

在其上方放置一个黑色的半透明 div。

- erikkallen

尝试过了，不起作用。如果你能以这种方式让它工作，请告诉我。 - Lee Englestone

你怎么让它变成透明的？需要进行一些调整才能在所有浏览器上正常显示（jQuery可以帮助您完成这项任务）。 - erikkallen

1

创建一个黑色的PNG图片，透明度设置为50%。在鼠标悬停时将其覆盖在上方。

- bitbonk

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- fresskoma · Accepted Answer

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

只使用CSS的代码段（仅适用于现代浏览器）
基于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;

}

还有这张图片：

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