darylnak darylnak - 2 months ago 10
CSS Question

Cannot get jQuery to recognize mouse hover over image

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.



<!DOCTYPE html>
<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>
<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 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 id="second" class="background">
<p class="align-vert">This is my personal website</p>


$(document).mousemove(function() {


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() {