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

【问题标题】：Mouseover/hover event for navigation bar link导航栏链接的鼠标悬停/悬停事件
【发布时间】：2012-10-31 12:05:22
【问题描述】：

我设置了一个导航栏，其中包含指向网站其他页面的链接的图像。我正在尝试为列表中的链接获得鼠标悬停或悬停效果。基本上，当用户将鼠标悬停在链接上单击时，我希望出现的每个按钮都有不同的图像。（如果需要 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;
    }

非常感谢您的帮助！

【问题讨论】：

标签： html css hover html-lists onmouseover

【解决方案1】：

这是一个纯 CSS 教程，可让您走上正确的道路：

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

编辑以回应您的评论“URL 可以用于我桌面上的文件夹中而不是网络上的图像吗？”

假设你有这个文件夹结构：

/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 那样灵活 - 但是您问题的最终答案是“是”，您可以链接到您的图片桌面。

【讨论】：

我让它工作，但在我的 css 中它使用： background-image: URL('images/NavBar.png'); URL 可以用于我桌面上的文件夹中而不是网络上的图像吗？

【解决方案2】：

在 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");
});

【讨论】：