在悬停时更改图像部分的不透明度

时间:2013-07-28 00:20:23

标签: css hover opacity

如何仅在鼠标悬停时更改按钮的不透明度。

<style>
.change_opacity:hover{

/* FIRST (order is important) */
opacity: 0.7;

/* SECOND (IE8) */
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=70)”;

/* THIRD (IE7) */
filter: alpha(opacity=70);
} 
</style>

<a href="http://www.youtube.com/watch?v=xiwLYMExzi8">
<img src="http://i.imgur.com/nGiyduv.jpg" alt="potatos" class="change_opacity"></a>

4 个答案:

答案 0 :(得分:0)

如果你使用的是CSS类,那就像:

.whateverClass{
  opacity:0.5;
}
.whateverClass:hover{
  opacity:1;
}

whateverClass更改为您的班级,并相应地调整不透明度。

答案 1 :(得分:0)

你不能这样做。 AFAIK,无法选择影响css的部分图像;浏览器无法分辨该图像的那一部分是一个按钮!剪下按钮,使其成为一个单独的div,然后做PHPglue所说的。

答案 2 :(得分:0)

您必须使用&#39;图片地图&#39;。它是一种分解图像的不同部分并能够用它们执行不同功能的方法。我之前创建了图像映射,让图像的不同部分转到不同的URL。

有很多在线工具可以帮助您制作图像地图。您可以使用某些设置here来调整CSS属性

答案 3 :(得分:0)

更改您的代码:

 <a href="http://www.youtube.com/watch?v=xiwLYMExzi8">
 <img src="http://i.imgur.com/nGiyduv.jpg" alt="potatos" class="change_opacity" >
 </a>

 <a href="http://www.youtube.com/watch?v=xiwLYMExzi8" class="change_opacity" >
 <img src="http://i.imgur.com/nGiyduv.jpg" alt="potatos" />
 </a>

,您的css将是:

.change_opacity{
   opacity: 1;
}

.change_opacity:hover{
   opacity: 0.7;
}