jQueryがイメージ上でマウスのホバーを認識できない

マウスカーソルがその上に置かれたときに画像をアニメートしようとしています。私はこれを達成するためにjQueryを使用しています。なぜ私のコードの現在の状態で動作しないのか分かりません。事前にお詫び申し上げます、私はちょうどWeb開発への私の努力を始めました。jQueryがイメージ上でマウスのホバーを認識できない

ありがとうございます！

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="CSS/stylesheet_test.css" rel="stylesheet" type="text/css"> 
    <link rel="stylesheet" href="CSS/animate.css"> 
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:500&amp;subset=latin-ext" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 
    <script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script> 
    <script type="text/javascript" src="scripts/test.js"></script> 
    <title>Daryl N.</title> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="navbar"> 
     <div class="nav-text"><span id="home"><a href="index_test.html">Home</a></span><span id="archive">Archive</span></div> 
     </div> 
     <div id="first" class="background"> 
     <div class="align-vert"><img id="me-pic" src="./images/me.jpg" alt="A picture of me is suppose to be here" style="width:240px;height:240px;" class="me-border animated bounceIn"><span class="daryl animated bounceIn">Hi, I'm Daryl</span></div> 
     </div> 
     <div id="second" class="background"> 
     <p class="align-vert">This is my personal website</p> 
     </div> 
    </div> 
    </body> 
</html>

jQueryの

$(document).mousemove(function() { 
    if($('#me-pic').is(':hover') 
    { 
     alert("Hello"); 
    } 
});

UPDATE

は私の問題の原因は、に私の画像div要素のzインデックスを設定することから来-1 。これを変更して私の問題を解決し、スクリプトを変更します。あなたの方法で仕事をしたりべきではない場合、私はわからないんだけど、まあ

$(document).ready(function() { 
    $('#me-pic').hover(function(){ 
     alert("Hello"); 
    }) 
});

出典

2016-11-23 darylnak

ページ全体にmousemoveイベントをバインドしないでください。非常に非効率的です。そのメソッドが何回実行されるか考えてみてください。 mousemoveのイベント引数を使用して、選択したメソッドを動作させる方法がありますが、属性の比較が必要です。代わりに '$（selector）.hover（）'メソッドを使用してください。 – magreenberg

を、これを処理するためのより良い方法があります：あなたは、セレクタに直接ホバーイベントを添付することができますjQueryを使って

出典

2016-11-23 17:56:31 casraf

それでも動作しません。 CSSファイル内の何かが問題を引き起こす可能性がありますか？ – darylnak

'$（document）.ready（function（）{...}）;'で囲むようにしてください。ページの残りの部分の上にjsファイルを読み込んでいるようです。ページの読み込みを終了します。回答を編集 – casraf

私はテストページを作成し、これが動作することを確認できます！現在のページで間違っている必要があります。ありがとう、+1。 – darylnak

、これを試してみてください

$(document).ready(function() { 
    $('#me-pic').hover(function() { 
    alert("Hello"); 
    }); 
});

出典

2016-11-23 17:55:49 MCMXCII

それでも動作しません。 CSSファイル内の何かが問題を引き起こす可能性がありますか？ – darylnak

おそらく、コンソールにどのようなエラーが表示されていますか？ – MCMXCII

解決策は、hover jqueryメソッドを使用することです。

$('#me-pic').hover(function(){ 
    alert("Hello"); 
})

閲覧参照here。

さらに、私は$(document).mousemove()イベントを削除することをお勧めします。この状況では、非効率的な方法です。

出典

2016-11-23 18:07:27

jQueryがイメージ上でマウスのホバーを認識できない

答えて

関連する問題