jQuery Tutorial - 37 - Hover Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' org
with a video tutorial for the new Boston
in this tutorial we're going to be
looking at the jquery hover event
handler and we're going to be creating a
basic menu in which when we hover over
the items we get a description of what
the link will take us to so you've
probably seen this in a variety of
websites and in fact it's an extremely
effective way to show your user what
they're about to see and it's a it's a
nice looking effect and it's done very
very simply with jQuery so the first
thing we're going to do is go ahead and
create a basic menu and I'm just going
to put a few different options in here
so the first one is going to be videos
the hyperlinks hash for now obviously
you can choose the hyperlink if you're
applying this to a website I'm going to
give an ID to this and that's going to
be menu underscore videos I can then go
ahead and copy and paste this and I'm
just going to paste this F make three
references of it I'm going to put a
slash after each one so I'm going to
change these values just so we can get a
bit of variety and then change the IDs
that are associated with them as well so
as long as we've done this and and we
have a menu that we want to show for
example videos code and forum you can
see at the moment nothing happens the
links don't go anywhere and nothing
happens when we hover over them so now
what we want to do is create an area
below and I'm going to do this inside of
a div and that's just going to be the
menu feedback so what's going to happen
is when we roll over a menu item in our
browser we'll have the menu feedback
display a short description about that
link so the first thing we need to do
with regards to the jQuery code is
create an external file where we write
our code so I'm going to create a new
file in my text editor and inside the
J's folder I'm just going to call this
hover Jas
so in here we can start to begin to
reference these menu items and display
the appropriate message the first thing
I want to do however is create a
reference to this JavaScript file I've
just created so the type is going to be
JavaScript text forward slash JavaScript
and the source is going to be Jas /ha
ver ax so now that we've included the
hover GS script into our page we can go
ahead and start writing the code now
because we're using an event handler we
again need to reference the videos code
and forum I'm taking this short and easy
way of doing this just for the
simplicity of this tutorial
and I'm actually copying and pasting the
code down inside hover J s however there
are more appropriate ways to write out
the code so let's go over to our hover J
s far and start writing this out like I
said there are better ways to do this
but for the purpose of the tutorial
we'll keep it short okay so we need to
reference our menu items individually so
the first one I'm going to reference is
menu underscore videos remember we gave
the menu videos or the link and ID of
menu underscore videos we're now going
to say dots hover and then create some
parentheses and inside here we can
create the function that runs when we
hover over this menu item so let's go
ahead and write function I'll block and
we'll just bring this down a bit here
okay so we can start writing our code in
we need to reference the menu feedback
div and then place them at text inside
of this so we reference this again and
using the same method menu feedback and
then we say dot HTML and inside here we
can write some text so with regards to
the videos we can write something like
free video tutorials now when we hover
over this link the menu feedback will
contain this value here so let's go
ahead and refresh when we hover over
four
woman code nothing happens because we
haven't created an event for this year
however when we hover over videos you
can see that we have the free video
tutorials text appear when we come away
from this
it stays however we do have another
event handler for that as well so we'll
discuss that in another tutorial so now
let's go ahead and look at the code and
the forum now the short way to do it
would be to copy and paste this down the
page so for the purpose of this tutorial
that's what I'm going to do so we have
the mint the menu code and we also have
menu forum and we can then just change
these values so free high-quality code
and a help forum so now that we've
created an event for each of these menu
items when we refresh our browser when
we hover over each one it changes
depending over the one that we've
hovered so using the hover event handler
we've created a description of links
when we hover over them