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

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

Web サイトの相対的な場所ではなく、サーバー ファイルの場所を参照しているように見えます。www dir から Web サイトをホストしている場合は、次のようにします。

<!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 に答える
1

仮想パスではなく、サーバーの物理パスからファイルを参照しているようです。URL から削除var/www/してみてください。HTML ファイルが既に存在する/JSPROBAK/場合は、パスを のような直接の相対パスとして指定できます<img src="button.png" />。

于 2012-04-25T17:50:26.377 に答える
0

https://github.com/jquery/jquery-colorでそれを行うことができる単色の場合、このようにフェードすることはできません

  • それ以外の場合は、相対的な位置でコンテナを作成します<a>（または、クリック可能ではない場合は別の要素）

  • 内部には 2 つの絶対位置画像があり、一方が他方の上にある

  • 下のものはホバーであり、より低い z-index セットを持つ必要があります (両方に z-index を設定します)

  • <a>ホバーイベントのfadeOutで、最高のz-indexを持つもの

  • アニメーションが完了したら、z インデックスを交換します

于 2012-04-25T17:49:53.787 に答える