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

本文介绍了如何在鼠标悬停时使图像变暗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的问题..

我有一些图片（在超链接内），我想让每个图片在鼠标悬停时变暗应用具有高不透明度或某种东西的黑色面具），然后在mouseout时返回正常。但我找不出最好的方法。

我试过了。

Jquery颜色的动画和一些javascript引用。

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

我不想要。

要在80％不透明度下开始图像，然后在鼠标悬停时转到100％（这很容易）。要交换2个图像（一个光和一个黑暗），忘记提及这个抱歉。

想要吗？

我想在图片中（内嵌超链接）在鼠标悬停时变暗，

更新：

这是我的建议进度。看起来很好在IE8，但不是在FF3

 < html> 
< body> 
< a href =http://www.google.comstyle =background-color：black; opacity：1; filter：alpha（opacity = 100）> 
< img src =http://www.google.co.uk/intl/en_uk/images/logo.gifwidth =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>

想法？

/ p>

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.comclass =outerLink> 
< img src =http://www.google.co.uk/intl/en_uk/images/logo.gifwidth =200
 class =darkableImageonmouseout =this .style.opacity = 1; this.filters.alpha.opacity = 100
 onmouseover =this.style.opacity = 0.6; this.filters.alpha.opacity = 60/> 
< / a> 
< / body> 
< / html>

解决方案

或者，类似于erikkallen的想法， A标签黑色，并使鼠标悬停时图像半透明。

（将[可能]在所有常见浏览器中使用）

b
$ b

基于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.comclass =darken> 
< img src =http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpgwidth =200> 
< / a>

My problem..

I have a number of images (inside hyperlinks), and I want each to darken on mouseover (i.e. apply a black mask with high opacity or something), and then go back to normal on mouseout . But I can't figure out the best way to do it.

I've tried..

Jquery color animate and some javascript references.
Setting the opacity of the image with javascript.

I don't want..

Image start at 80% opacity then go to 100% on mouseover (that's easy).
To swap between 2 images (one light & one dark), forgot the mention this sorry..

To reiterate..

I want in image (inslide a hyperlink) to darken on mouseover and then lose its darkness on mouseout.

Thoughts?

UPDATE :

This is my progress from suggestions. Looks fine in IE8, but not in 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>

Thoughts?

-- Lee

ANSWER

I'm going with this (seems to work in 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>

解决方案

Or, similar to erikkallen's idea, make the background of the A tag black, and make the image semitransparent on mouseover. That way you won't have to create additional divs.

CSS Only Fiddle (will only work in modern browsers)
JavaScript based Fiddle (will [probably] work in all common browsers)

Source for the CSS-based solution:

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;

}

And the image:

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

这篇关于如何在鼠标悬停时使图像变暗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！