0

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

<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

4 回答 4

0

如果您使用的是 CSS 类，它会像：

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

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

于 2013-07-28T00:25:16.803 回答
0

你不能这样做。AFAIK，不可能选择图像的一部分来影响css；浏览器无法判断该图像的那部分是一个按钮！剪下按钮，使其成为一个单独的 div，然后按照 PHPglue 的说明进行操作。

于 2013-07-28T02:07:24.783 回答
0

您必须使用“图像映射”。这是一种分解图像不同部分并能够对它们执行不同功能的方法。我之前已经创建了图像映射，以便将图像的单独部分转到不同的 URL。

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

于 2013-07-28T03:39:14.183 回答
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;
}
于 2013-07-28T11:24:22.157 回答