Survoler l'élément 'layered' ... possible?

Question

Comment pourrais-je faire ce qui suit, de préférence en utilisant simplement CSS (mais peut-être aussi jquery) et PHP.

J'ai une zone div, button_background, qui a une image d'arrière-plan. À l'intérieur de ce div est un tag A, qui a un fond qui recouvre l'arrière-plan de la div. (C'est un triangle 'play' semi-transparent qui recouvre une image d'une vidéo). Je voudrais changer l'arrière-plan de l'étiquette A (à un triangle plus sombre) sur le roulement.

De:

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

Pour

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

Notez que je générer ce à partir de PHP et l'URL du bouton image de fond est une variable appelée encore $.

est ici le code html rugueux:

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

Answer 1

vous pouvez utiliser l'image plus sombre pour commencer et définir l'état initial dans le CSS à une opacité plus faible.

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

sur le changement vol stationnaire l'opacité à 1, IE aura besoin d'une propriété de filtre spécifique MS.

Vous pouvez également utiliser une image d'image-objet (à la fois les versions sombres et claires du triangle dans la même image PNG) et changer la position de l'arrière-plan en survol.