Problème affichage texte lors survol d'une image

Salut la foule,

J'ai un petit soucis, voici le code (que j'ai simplifié pour que l'on voit l'essentiel lié au problème) :

<div id="air">

<ul>
		<li>1</br><b class="disc">12</b></li>
</ul>
</div>

<div id="content">
<div class="prod">

<a class="mbp" href=""><img class="mbp" src="image.png" /></a>

</div>
</div>

#content {
	
	position: relative;
	width: 980px; 
	height: 600px; 
	margin: 0px auto; 
	background: #fff; 
	border: 1px solid #e5e5e5 #dbdbdb #d2d2d2;
	
	font-size: 19px; 
	line-height: 23px; 
	word-spacing:-1px;
	
	-webkit-box-shadow: rgba(0,0,0,0.3) 0px 1px 3px; 
	box-shadow: rgba(0,0,0,0.3) 0px 1px 3px; 
	-webkit-border-radius: 4px; 
	border-radius: 4px; }

#content:nth-child(1n) { border: none; }

.prod {
	
	background: url(image2.jpg) no-repeat 0px 0px; 
	height: 550px; 
	padding: 20px; }

.prod img { margin-right: 69px; }
.prod img#last { margin-right: 0px; }


#air {
	
	position: relative;
	width: 980px; 
	height: 120px; 
	margin: 18px auto; 
	background: #fff; 
	border: 1px solid #e5e5e5 #dbdbdb #d2d2d2;
	
	font-size: 14px; 
	word-spacing:-1px;
	
	-webkit-box-shadow: rgba(0,0,0,0.3) 0px 1px 3px; 
	box-shadow: rgba(0,0,0,0.3) 0px 1px 3px; 
	-webkit-border-radius: 4px; 
	border-radius: 4px; }

#air:nth-child(1n) { border: none; }

#air ul { width: 980px;  }

#air li { 
	
	display: block; 
	width: 242px; 
	height:100px; 
	float: left; 
	text-align: center; 
	border-right: 1px solid #e0e0e0; 
	margin: 0px 25px 0px -30px; 
	padding: 20px 0px 0px 0px; }


a#prod.mbp:hover, b#air.disc {visibility: visible; }

b.disc {visibility: hidden; }

Du côté du CSS, j'ai aussi essayé ça :

a.mbp:hover, b.disc {visibility: visible; }

b.disc {visibility: hidden; }

Lorsque je survole ma fameuse image, bah le texte (qui est censé s'afficher, ne s'affiche pas
Un moment je me suis demander si ce n'est pas un problème de superposition du contenu liés aux "div" mais je susi un peu paumé, je préfère éviter le Javascript et le jQuery, une solution en CSS sera le bienvenu !!

En attente de vos réponses les gens, merci d'avance, et bonne journée à vous !

J'ai pas trop le temps là, mais tu devrais essayer d'utiliser "display" : "none" et "block" pour faire disparaitre et apparaitre le contenu ciblé.

Cette technique en CSS ne peut marcher que si b.disc est enfant de a.mbp.

A la façon de l'infobulle dans ce tuto.

@Mob : Par rapport à la mise en page et ce que je veux obtenir, je ne peux pas faire de sorte qu'un soit enfant de l'autre, justement je voulais savoir s'il y avait un moyen de contourner cela.

@G3ronim0 : j'avais déjà essayé, cela ne marche pas

Oui effet je rejoins mob.

a écrit :
Cette technique en CSS ne peut marcher que si b.disc est enfant de a.mbp.

Pour une solution full css...je panse que c'est obligatoire...

Et si je fais ça, est-ce que cela marcherait ? :

<div class="all">
<!--(…)-->
<li>1 : <b class="disc">12%</b></li>
<!--(…)-->
<img class="mbp" src"" />
<!--(…)-->
</div>

css : 

.all b.disc {visibility: hidden; }
.all img.mbp:hover + b.disc {visibility: visible; }

Merci pour vos retours !

EDIT : Je viens d'essayer, cela ne marche toujours pas !
EDIT : Même quand j'essaie de faire uniquement un changement de couleur du texte qui se situe dans la balise "b", cela ne marche pas !
Modifié par e15fb7 (12 Apr 2012 - 17:43)

<div>
    <a class="mbp" href="#">test</a>
    <b class="disc">12%</b>
</div>&#8203;

b.disc { display:none; }
.mbp:hover + b.disc { display:block; }​

Ca, ça marche à la limite. Mais ça impose pas mal de conditions.

Je pense que pour ton layout, il te faut du JS. C'est assez simple à réaliser avec jQuery.