由文本鼠標懸停觸發的基於CSS的橫幅圖像交換

Question

當用戶翻閱菜單文本時，我正在尋找在每個菜單項的特定圖像上替換導航欄上方橫幅上的圖像背景。

我想要它，以便每個菜單項導致旗幟交換與每個菜單項的文本相關的圖像的背景。

我只想使用CSS ...不是JavaScript。

這似乎是我可以通過一些google搜索找到最近的事情，但你可以看到，它是從一個有點不同的就是我在尋找：

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

而CSS來與它一起去：

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

我能夠這樣做。這應該完成你正在尋找的東西。社區中的其他人可能有更好的方法，但這是我發現的一種方法。造型元素等是你:)

我的jsfiddle它位於： http://jsfiddle.net/ChadR/tM2Nr/

無論是下載和舉辦這個庫，或者你的腦袋標籤之間添加它。 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 { }