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

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

1 个答案: