Échange d'image de bannière CSS déclenché par le texte mouseover

Question

Je cherche à remplacer un fond d'image sur une bannière au-dessus de ma barre de navigation par une image spécifique pour chaque élément de menu lorsque l'utilisateur survole le texte du menu.

Je le veux pour que chaque élément de menu permette à la bannière d'échanger l'arrière-plan pour une image liée au texte de chaque élément de menu.

Je ne veux utiliser que CSS ... Pas JavaScript.

Cela semble être le plus proche chose que je pouvais trouver par googling, mais comme vous pouvez le voir, il est un peu différent de ce que je cherche:

<div class="nav"> 
    <a href="#"> 
     <img src="logo.gif" width="187" height="136" alt="" /> 
    </a> 
</div> 

Et le CSS pour aller avec elle :

div.nav { 
    height: 187px; 
    width: 136px; 
    margin: 0; 
    padding: 0; 
    background-image: url("logo-red.gif"); 
} 

div.nav a, div.nav a:link, div.nav a:visited { 
    display: block; 
} 

div.nav img { 
    width: 100%; 
    height: 100%; 
    border: 0; 
} 

div.nav a:hover img { 
    visibility: hidden; 
} 

Answer 1

J'ai été capable de le faire de cette façon. Cela devrait accomplir ce que vous cherchez. D'autres dans la communauté pourraient avoir une meilleure méthode, mais c'est celle que j'ai trouvée qui fonctionne. Styling les éléments, etc. est sur vous :)

Mon jsFiddle car il est situé ici: http://jsfiddle.net/ChadR/tM2Nr/

soit télécharger et héberger cette bibliothèque, ou l'ajouter entre vos balises de tête. https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

HTML:

<div class="HeaderBanner"> 
    <img id="backBanner" 
     src="http://images3.wikia.nocookie.net/__cb20110210142733/recipes/images/thumb/d/db/Packham_pear.jpg/300px-Packham_pear.jpg" 
     data-original="http://images3.wikia.nocookie.net/__cb20110210142733/recipes/images/thumb/d/db/Packham_pear.jpg/300px-Packham_pear.jpg" 
     alt="e.s.t" /> 
</div><!--HeaderBanner--> 

<ul id="BannerBar" class="MenuBarHorizontal"> 
    <li id="button1" data-img="http://watchpeoplejump.files.wordpress.com/2011/02/banana.jpeg?w=300&h=226"><a href="bio.html">Biography</a></li> 
    <li id="button2" data-img="http://www.nyapplecountry.com/images/photosvarieties/redrome04.jpg"><a href="#">Albums</a></li> 
    <li id="button3"><a href="#">Links</a></li>  
</ul><!--MenuBarHorizontal--> 

JavaScript:

$(document).ready(function() { 
    $("#BannerBar li").mouseover(function() { 
     $("#backBanner").attr("src", $(this).data("img")); 
    }).mouseout(function() { 
     $("#backBanner").attr("src", $("#backBanner").data("original")); 
    }); 
}); 

CSS:

.HeaderBanner { } 
.HeaderBanner img { 
height:250px; 
} 
.MenuBarHorizontal ul { display:block; width:800px; margin:15px auto 15px; } 
.MenuBarHorizontal li { 
float:left; 
margin:0 2px 0 0; 
list-style:none; 
list-style-image:none; 
} 
.MenuBarHorizontal li a { 
display:block; 
text-decoration:none; 
color:#000000; 
width:150px; 
background:#9C0; 
text-align:center; 
font-weight:bold; 
padding:7px 0 7px 0; 
} 
.MenuBarHorizontal li a:hover { 
background:#000000; 
text-decoration:none; 
color:#ffffff; 
} 
#backBanner { }