'分层'元素上的翻转...可能吗？

Question

我该怎么做，最好只使用CSS（但也可能是jquery）和PHP。

我有一个div区，button_background，它有一个背景图像。里面的div是一个A标签，它有一个覆盖div背景的背景。 （这是一个半透明的'play'三角形png，它覆盖了视频中的静止图像）。我想在翻滚时改变A标签的背景（到较暗的三角形）。

来源：

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

要

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

请注意，我从PHP生成此，按钮背景图片的URL是一个名为$仍存变数。

这里的粗糙的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图像中的三角形的黑暗和亮的版本），只需要改变悬停的背景位置。