Astuce? Masquer image conteneur A au survol d'un conteneur B

Appel à competences :
Voila l'idée:
J'ai une image qui s'affiche dans un conteneur A, exemple un <div>.
Ce div A est suivi d'une table B
Dans la table B: 6 boutons.

Je voudrais que l'image background du DIV.A se masque quand je survole 1 des 6 boutons de la table D

J'ai bien pensé à englober tout mon petit monde dans un super DIV en utilisant la pseudo classe :hover.
Inconvénient : si je passe au-dessus de mon super div, ça marche tout le temps, même si je suis pas passée avec précision sur un de mes boutons
Merci pour l'aide

Bonjour

Tu mets ton sujet dans la partie CSS du forum, cela veut-il dire que tu cherches une solution 100% CSS, ou es-tu ouvert à d'autres suggestions. Si c'est le cas, j'aurai tendance à dire qu'un javascript onmouseover sur ton bouton pourrait faire l'affaire, surtout qu'il s'agit apparemment dans ton cas d'appliquer un effet sur un élément qui se trouve dans le html avant le bouton.

Je préfère les solutions css..

Et finalement, j'ai trouvé !
Ma solution ressemble à ceci :

1 - Juste avant la table B :
Ajout d'une image invisible qui sera lue par les outils non-voyants (grâce au Alt)

<img src="images/pix.gif" alt="Texte pour les non-voyants" width="1" height="1"/>


2- juste après la table B:
Ajout du :
<div A>Texte à faire voir et disparaître (similaire au alt pour non-voyants</div>

Ensuite, dans le css :

/************ affiche masque *********/
div.A
{
position:absolute;
top:60px;height:50px;width:100%;font-size:48px;color:#e0e6ed;
background: url(image-decorative.gif) no-repeat 260px 10px; /** bien sûr ajuster le positionnement de votre image et reste des paramètres visuels***/
padding-left:28px;
}
table.B
{margin-top:40px !important;
}
table.B:hover + div.A
{display:none;
}
/***end ***/

à priori ça marche sur moz et IE, du moins sur mon interface de page accueil avec toute sa complexité. So long...

Bonjour aussi,

Ta solution ne marchera pas si l'image ne peut être chargée (typiquement, si la connexion de l'utilisateur plante, ou si ton serveur déconne ; ce qui arrive assez souvent).

Pour ce genre d'effet, seul JS permet une accessibilité totale (ou du moins se dégradant proprement).

ps. : les images invisibles ça fait très années 90

ps2. : merci de baliser tes portions de code avec [ code] et [ /code] (sans espaces).