0

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

我想要它，以便每个菜单项都会使横幅将背景交换为与每个菜单项的文本相关的图像。

我只想使用 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;
}
4

1 回答 1

0

我能够做到这一点。这应该完成你正在寻找的东西。社区中的其他人可能有更好的方法，但这是我发现的一种方法。元素的样式等由您决定：)

我的 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 { }
于 2013-05-30T23:56:26.407 回答