Question

我正在开发一个应用程序，我有下一个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没有正确加载，任何想法？

Answer 1

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

Answer 2

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>

Answer 3

看起来您正在引用服务器文件位置而不是网站相对位置。如果您从www dir主持该网站，那么我会尝试这个：

<!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>

Answer 4

如果它只是一种纯色，你可以用https://github.com/jquery/jquery-color

来褪色

否则创建<a>容器与位置相对（或其他元素，如果它不应该是可点击的）
里面有2个绝对位置的图像，一个在另一个上面
下面的一个是悬停，应该有一个较低的z-index集（在两者上设置z-index）
关于<a>悬停事件fadeOut具有最高z-index的
动画完全交换z-indexes

Answer 5

我为你做了一个jsfiddle，显示它在这里工作：http://jsfiddle.net/gregjuva/Sj7W5/

我在托管的google版本的jquery（https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js）中链接，代码运行正常，所以你可以尝试一下你自己的代码 - 也许你的jquery已经损坏了。

Javascript和jquery为灰色按钮变红

5 个答案: