在“layered”元素上滚动...有可能吗？

Question

我该如何做下面的事情，最好只使用CSS (但也可能使用jquery )和PHP。

我有一个div区域，button_background，它有一个背景图像。在div内部是一个A标记，它的背景覆盖了div的背景。(它是一个半透明的“播放”三角形png，覆盖了视频中的静止图像)。我想在翻转时更改A标签的背景(到一个更暗的三角形)。

发自：

-------------
| ($still)  |
|     \     |
|      \    |
|      /    |
|     /     |
-------------

至

-------------
| ($still)  |
|    *\     |
|    **\    |
|    **/    |
|    */     |
-------------

请注意，我是从PHP生成的，按钮背景图像的url是一个名为$still的变量。

下面是粗略的html：

<div class="button_background">
  <a class="button_overlay" href="page.html"></a>  
</div>

Answer 1

您可以从较暗的图像开始，并将CSS中的初始状态设置为较低的不透明度。

a.button_overlay { background:url(images/triangle.png); opacity:0.5;}

在悬停时将不透明度更改为1，IE将需要MS特定的滤镜属性。

你也可以只使用一个精灵图像(在同一个PNG图像中的三角形的深色和浅色版本)，并且只需改变悬停时的背景位置。