如何使鼠标上方的图像变暗？
如何使鼠标上方的图像变暗？
提问于 2009-11-17 09:35:50
我的问题..
我有许多图像(在超链接中)，我希望每个图片都在鼠标上变暗(例如，使用具有高不透明度的黑色面具或其他东西)，然后在鼠标退出时恢复正常。但我想不出最好的办法。
我试过了.
- 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>有什么想法？
--李
答案
我要用这个(似乎在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>回答 6
Stack Overflow用户
回答已采纳
发布于 2009-11-17 09:39:59
或者，类似于erikkallen的想法，将A标签的背景变成黑色，并在鼠标上使图像半透明。这样您就不必创建额外的div了。
- CSS仅限于Fiddle (只在现代浏览器中工作)
- 基于JavaScript的Fiddle (可能在所有常见的浏览器中都能工作)
基于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>Stack Overflow用户
发布于 2015-04-13 23:06:15
使图像100%明亮，因此它是明确的。然后在Img悬停时，将它降到你想要的任何亮度。
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">
那就行了，希望能帮上忙
Stack Overflow用户
发布于 2010-12-13 00:00:12
我意识到这有点晚了，但是您可以在代码中添加以下内容。但是，对于透明的pngs来说，这是行不通的，你需要一个剪切面罩。我现在要去看看。
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%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1747637
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号