如何在鼠标悬停时使图像变暗？
我的问题..
我有许多图像（在超链接中），并且我希望每个图像在鼠标悬停时变暗（即，使用具有高不透明度或某些功能的黑色蒙版），然后在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>
问题答案：
或者，类似于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>
-
问题内容： 我试图当鼠标移到图像的左下方时出现一个小框。在该框内，将有一个指向其他页面的链接。 这有点类似于我想要的东西，但是盒子要更小并且不连接到图像的边框。 我已经尝试了一切，但找不到答案。而且我不想使用工具提示，更不用说我没有任何JavaScript知识了。我真的希望这是CSS。 问题答案： 这是在CSS3中使用伪元素。 HTML： CSS： 相反，这是使用jquery达到相同结果的一种方式
-
问题内容： 我有一张图片： 然后，我将其显示在屏幕上： 如何检测鼠标是否在触摸图像？ 问题答案： 使用获得描述你的边界，然后使用来检查，如果鼠标光标这里面。 例：
-
我想设置一个圆圈网格（非重叠），以便当鼠标指针位于其中一个圆圈上时，该圆圈会改变颜色。我已经尝试过，到目前为止有两种选择： > 使用容器，例如JPanel。使用MouseMotionListener.mouseMoved（MouseEvent e）始终获取鼠标指针的x和y坐标。然后，如果坐标位于其中一个圆圈内，请使用repaint（）重新绘制整个容器。 将每个圆设置为一个容器。使用mouse li
-
问题内容： libgdx中是否有任何侦听器可以让我检测到鼠标悬停而不是鼠标悬停。在场景2D的按钮类中，您有2种方法isOver和isPressed，但是它们执行相同的操作…还有其他问题吗？还有另一种方法来检测鼠标悬停在actor上吗？ 问题答案： 还有的可以连接到和它提供的事件，如下面的： 该事件从根本上来说意味着鼠标开始悬停在角色上，意味着它“离开”了角色的区域。它还有一个事件，您可以使用该事件
-
问题内容： 有时，我可以选择使用CSS元素：悬停或JavaScript onmouseover来控制页面上html元素的外观。考虑以下情况，其中div包装了输入 我希望输入将鼠标光标悬停在div上时更改背景色。CSS方法是 JavaScript方法是 每种方法的优点和缺点是什么？CSS方法是否适用于大多数Web浏览器？JavaScript比CSS慢吗？ 问题答案： ：hover的问题是IE6仅在链
-
我有这个样本： 链接 CODE超文本标记语言： 所有人都能清楚地理解错误所在，并能清楚地了解所有人的行为，包括发明者的行为，并能清楚地了解自己的真实性和准建筑风格。 代码CSS： 代码JS: 我希望div