-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;
    }

非常感谢您的帮助！

4

2 回答 2

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

于 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 回答