Question

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

非常感谢帮助！

Answer 1

这是一个仅限CSS的教程，可以帮助您走上正确的道路：

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）不是最好的方法，因为它们不像相对网址那样灵活 - 但是问题的最终答案是“是”，您可以链接到图像在桌面上。

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

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

2 个答案: