-1

Web サイトの他のページへのリンク用の画像を含むナビゲーション バーを設定しています。リスト内のリンクに対してマウスオーバーまたはホバー効果を取得しようとしています。基本的に、ユーザーがマウスオーバーをロールしてリンクをクリックしたときに表示するボタンごとに異なる画像があります。(jquery または java が必要な場合は問題ありません!) HTML は次のとおりです。

<body>
 <div id="container"  style="images/logo.png">
 <p id="logo"><img class="project14"src="images/NavBar-01.png"></a></p>

    <ul id="nav">
        <li id=><a href="work.html"><img src="images/NavBar-02.png"></a></li>
        <li id=><a href="about.html"><img src="images/NavBar-03.png"></a></li>
        <li id=><a href="resume.html"><img src="images/NavBar-04.png"></a></li>
    </ul>

私が持っているCSSは次のとおりです。

ul#nav {
    width: 956px; list-style: none; overflow: hidden; margin: -117px 0 60px 0;
}

ul#nav li {
    width: 145px; height: 109px; float: right;
    }

助けていただければ幸いです。

4

2 に答える 2

1

これは、正しい道を歩むための CSS のみのチュートリアルです。

http://css-tricks.com/css-menu-with-rollover-images/

「ウェブ上ではなく、デスクトップ上のフォルダにある画像に URL を使用できますか?」というコメントに応えて編集します。

次のフォルダー構造があるとします。

/project
     /css
         your-css-file.css

     /images
         NavBar.png

NavBar.pngCSS は、次のように画像を簡単に参照できます。

background-image: url('../images/NavBar.png');

基本的には、..「現在地から 1 レベル上」を意味するので、/css「いる」から、画像を探すために調べます/project。/images

適切なフォルダー構造は、実際、あらゆるプロジェクトの出発点として適切です。上記の例は、ローカル マシンとホスティングの両方で機能します。絶対リンク (フル パスを指定するリンクなどfile:///C:/Documents%20and%20Settings/your-user-name/Desktop/NavBar.png) は、相対 URL ほど柔軟ではないため、最適な方法ではありません。ただし、質問に対する最終的な回答は「はい」で、デスクトップ上の画像にリンクできます。

于 2012-11-12T01:53:06.287 に答える
0

jQueryで：

$('#nav li').mouseenter(function() {
  $(this).find("img").attr("src","/path/to/new/image_hover.extension");
});

$('#nav li').mouseout(function() {
  $(this).find("img").attr("src","/path/to/old/image.extension");
});
于 2012-11-12T02:00:24.430 に答える