導航欄鏈接的鼠標懸停/懸停事件

-1

我有一個導航欄，其中包含用於指向網站其他頁面的鏈接的圖像。我正在嘗試爲列表中的鏈接獲得鼠標懸停或懸停效果。基本上，我對每個按鈕有不同的圖像，當用戶滾動鼠標懸停來點擊鏈接時，我想顯示這個圖像。（！如果需要的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; 
    }

幫助深表感謝！

來源

2012-11-12 user1762373

這裏有一個CSS-僅教程，將讓你在正確的道路上：「可以URL中使用的是一個文件夾在我的桌面上的圖片

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

編輯迴應您的評論而不是在網上？「

讓我們說，你有這樣的文件夾結構：

/project 
    /css 
     your-css-file.css 

    /images 
     NavBar.png

你的CSS可以很容易地引用NavBar.png像這樣的：

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

基本上，..的意思是「一個級別從目前的向上位置「，所以從/css你會」在「/project - 然後它會查看/images找到圖像。

正確的文件夾結構實際上是任何項目的一個很好的起點 - 上面的例子可以在你的本地機器和你的主機上工作。絕對鏈接（指定完整路徑的鏈接，例如file:///C:/Documents%20and%20Settings/your-user-name/Desktop/NavBar.png）並不是最好的方法，因爲它們不像相對URL那樣靈活 - 但是您的問題的最終答案是「是」，您可以鏈接到桌面上的圖像。

來源

2012-11-12 01:53:06 Luca

我得到這個工作，但在我的CSS它使用：背景圖像：網址（ '圖像/ NavBar.png'）;可以將URL用於位於桌面上的文件夾中而不是網絡上的圖像？ – user1762373

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-12 02:00:24 itsazzad

導航欄鏈接的鼠標懸停/懸停事件

回答

相關問題