0

我正在开发一个应用程序，其中包含下一个 JS 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src="/var/www/JSPROBAK/jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
    $(".button").hover(function() {
        $(this).attr("src","/var/www/JSPROBAK/button-hover.png");
            }, function() {
        $(this).attr("src","/var/www/JSPROBAK/button.png");
    });
});
</script>
</head>

<body>
<img src="/var/www/JSPROBAK/button.png" alt="My button" class="button" />
</body>
</html>

我有 button.png、button-hover.png 和 jquery.js 的目录是代码中指定的目录。当将鼠标放在灰色按钮上时，代码应该将灰色按钮 (button.png) 变成红色按钮 (button-hover.png)。浏览器最初显示灰色按钮的图像，但将鼠标放在它上面时不会变成红色，所以我假设 jquery.js 没有正确加载，知道吗？

4

4 回答 4

1

看起来您是从服务器的物理路径引用文件，而不是虚拟路径。尝试var/www/从 URL 中删除，如果您的 HTML 文件已经存在，/JSPROBAK/您可以将路径指定为直接的相对路径，例如<img src="button.png" />.

于 2012-04-25T17:50:26.377 回答
1

jsFiddle（http://jsfiddle.net/ZWxEg/10/）

如果此代码对您不起作用，那么您没有正确加载 jQuery。

-- 已编辑 -- 应 gdoron 的要求使用悬停：D

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src="/var/www/JSPROBAK/jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
    $(".button").hover( function ()
    {
         $(this).attr("src","http://www.google.com/logos/2012/sovereignty12_hp.jpg");
    },
    function ()
    {
         $(this).attr("src","http://www.google.com/logos/2012/sundback12-hp.jpg");
    });
});
</script>
</head>

<body>
<img src="http://www.google.com/logos/2012/sundback12-hp.jpg" alt="My button" class="button" />
</body>
</html>​
于 2012-04-25T17:51:42.413 回答
1

您似乎在引用服务器文件位置而不是网站相对位置。如果您从 www 目录托管网站，那么我会试试这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src="/JSPROBAK/jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
    $(".button").hover(function() {
        $(this).attr("src","/JSPROBAK/button-hover.png");
            }, function() {
        $(this).attr("src","/JSPROBAK/button.png");
    });
});
</script>
</head>

<body>
<img src="/JSPROBAK/button.png" alt="My button" class="button" />
</body>
</html>
于 2012-04-25T17:53:45.270 回答
0

您将无法像这样褪色，如果它只是纯色，您可以使用https://github.com/jquery/jquery-color

  • 否则创建<a>具有相对位置的容器（或另一个元素，如果它不应该是可点击的）

  • 里面有 2 个绝对位置的图像，一个在另一个之上

  • 下面的一个是悬停，应该有一个较低的 z-index 设置（在两者上设置 z-index）

  • 在<a>悬停事件上淡出具有最高 z-index 的那个

  • 在动画完成交换 z-indexes

于 2012-04-25T17:49:53.787 回答