那些遇到过的问题

相关疑难解决方法(0)

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

我的问题..

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

我试过了..

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

我不想..

  • 图像从80%不透明度开始,然后在鼠标悬停时变为100%(这很容易).
  • 要在2张图片(一盏灯和一盏黑))之间切换,忘记提及此对不起..

重申..

我希望图像(插入超链接)在鼠标悬停时变暗,然后在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>
Run Code Online (Sandbox Code Playgroud)

思考？

- 李

回答

我要用这个(似乎在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>
Run Code Online (Sandbox Code Playgroud)

javascript css

Lee*_*one
2009 11-17
30
推荐指数
3
解决办法
11万
查看次数

标签 统计

css ×1

javascript ×1