Cannot get jQuery to recognize mouse hover over image

222
November 26, 2016, at 11:06 AM

I am trying to animate a picture when the mouse cursor hovers over it. I am using jQuery to accomplish this. I cannot figure out why it does not work for the current state of my code. Apologies in advance, I just started my endeavour into web development.

Thanks!

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

The source of my problem came from setting the z-index of my image div to -1. Changing this solved my problem, as well as changing the script.

Answer 1

Well, I'm not sure if your method should work or not, but there's a better way to handle this, designed for the original purpose:

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

With jQuery you can attach the hover event directly onto the selector, try this:

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

The solution is to use hover jquery method.

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

View reference here.

Further more,I recommend you remove $(document).mousemove() event.In this situation, it is inefficient method.

READ ALSO
Google maps - get infoWindow content

Google maps - get infoWindow content

The sample is from google maps documentation and I find it very useful for meMy problem is that I can't use the infoWindow content in my anonymous function, which the button calls

347
How to send a correct AJAX JSON?

How to send a correct AJAX JSON?

I have a form with only 2 inputsI wanna send a JSON to my POST method

371
JQuery Chosen Plugin Doesnt Update Dropdown Options After Ajax Loads Select With Options

JQuery Chosen Plugin Doesnt Update Dropdown Options After Ajax Loads Select With Options

I have added the JQuery Plugin "Chosen" to my Project which is working fineHowever I have a dependent Dropdown, when Dropdown A option is selected, it is supposed to filter the displayed options in Dropdown B

310
jquery issues with fancybox code

jquery issues with fancybox code

I am using the following code to trigger fancybox functionality

328