0

I'm trying to get a background gif to play when I hover over a link, and reset and play as you hover over it again.

It works exactly as I want it in this jsFiddle.

When I write my code up in Brackets I get this warning -> $' was used before it was defined. $("#hover").hover(function () {

I have included the Javascript in the head of my HTML like: 

<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="main.js"></script>

<head>

The HTML, CSS and JavaScript are the same as in the jsFiddle.

Checked in browser also, doesn't work. i get this warning ---> imain.js:10 Uncaught ReferenceError: $ is not defined at main.js:10 My page in its entirety can be seen here. jepen84.github.io/github.io

Jeppe Pendrup
  • 103
  • 1
  • 2
  • 7
  • Check if jQuery is loaded. You can see this in Chrome`s developer tools "network" tab. – Sveta Jul 03 '17 at 19:44
  • Does it also not work in the browser, or is it just an editor warning? – JJJ Jul 03 '17 at 19:46
  • 1
    Yeah, this is not a runtime error. Brackets is unlikely to know that you are using jQuery. I don't know the editor, but there's likely a setting to include "known global variables" or something. – Heretic Monkey Jul 03 '17 at 19:48
  • 1
    Possible duplicate of [jQuery won't work on brackets editor](https://stackoverflow.com/questions/22827704/jquery-wont-work-on-brackets-editor) – Lorenz Meyer Jul 03 '17 at 19:54
  • Checked in browser also, doesn't work. i get this warning ---> _imain.js:10 Uncaught ReferenceError: $ is not defined at main.js:10_ My page in its entirety can be seen here. https://jepen84.github.io/github.io/ – Jeppe Pendrup Jul 04 '17 at 07:11

1 Answers1

1

You get the error because jQuery does not load.

To load jQuery, you used: <script type="text/jquery" src="jquery-3.2.1.js"></script>

jQuery is not a programming language. It's solely a javascript library providing some convenient features.

In your <script>-tag, change type="text/jquery" to type="text/javascript" and it will load the file.

Tom M
  • 2,815
  • 2
  • 20
  • 47
  • Seems to have removed the warning, but the gif still doesn't show when you hover the link. Any suggestions? – Jeppe Pendrup Jul 04 '17 at 14:48
  • nothing happens because you bound the `.hover()` on the `span` which has zero height so you technically cannot hover it. Either, set the `span` to `display: block` (`inline-block` or just giving it content will also work) or use `$("#hover a")` instead of `$("hover a span")` – Tom M Jul 04 '17 at 15:25