由文本鼠标悬停触发的基于 CSS 的横幅图像交换

Question

当用户将鼠标悬停在菜单文本上时，我希望将导航栏上方横幅上的图像背景替换为每个菜单项的特定图像。

我希望每个菜单项都会导致横幅将背景交换为与每个菜单项的文本相关的图像。

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

这似乎是我通过谷歌搜索可以找到的最接近的东西，但正如你所看到的，它与我正在寻找的东西有点不同：

<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 { }