导航栏链接的鼠标悬停/悬停事件

-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

导航栏链接的鼠标悬停/悬停事件

回答

相关问题