我的问题..
我有许多图像(内部超链接),我希望每个图像在鼠标悬停时变暗(即应用具有高不透明度的黑色面具或其他东西),然后在mouseout上恢复正常.但我无法弄清楚最好的方法.
我试过了..
我不想..
重申..
我希望图像(插入超链接)在鼠标悬停时变暗,然后在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>
思考？
- 李
回答
我要用这个(似乎在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>
fre*_*oma 64
或者,类似于erikkallen的想法,将A标签的背景设为黑色,并使图像在鼠标悬停时变为半透明.这样你就不必创建额外的div了.
基于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>
使图像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">这样做,希望有所帮助
小智 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%;
}