由文本鼠标悬停触发的基于 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/

要么下载并托管这个库，要么将它添加到你的 head 标签之间。 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 { }