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 に答える