jQuery Tutorial - 48 - Hover over description 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
creating a hover over effect over an
element in HTML so just taking a look at
this example quickly I've got a link
just here and I've got an image just
below that now the overall effect we're
trying to achieve is when we hover over
a particular element we're going to take
a description from a custom custom
attribute that we give this element and
then we're going to display it in a box
as we hover over so the effects quite
cool and it's found on quite a few
websites mainly when you have content
you know you want to show your users or
give you use a description of the
content as they hover over be it an
image a link or anything else so you can
see that when I hover over Google I've
got this div element that's following my
cursor and it has a description which
says Google a powerful search engine so
the link still works we can go ahead and
click on it and go over to that link but
we've assigned a particular class to
this link to allow us to display this
description accordingly we can also use
it with images as well so you can see
I've got a tartan pattern here and my
description here a lovely tartan pattern
so that will work as long as the cursor
is hovered over this particular element
so the way I've created the code for
this tutorial is so you can easily use
it and modify it not modify it really I
mean you can feel free to modify it if
you like but the the overall idea of
this is so we can eat really easily and
quickly add more elements so if we
wanted to go ahead and create a link we
can do but then to create the image all
we need to do is create an image and we
don't need to modify the jQuery code
whatsoever
so the reason I've done it this way is
is it because it acts more like a
plug-in so you only have to ever include
a div element on your page if you want
to use this feature and then you can go
ahead and add elements and add in the
descriptions straight into the element
in
to an attribute and this will work so as
long as you follow this tutorial and
complete it and everything works you can
go ahead and actually use this
throughout your website and use it on
Ellie any element whatsoever so now that
you've seen an example we're going to go
ahead and look at start creating this
and start testing out these the specific
functionality that makes this work and
we'll eventually end up with an effect
like this so let's go ahead and start
writing the code ok so right over to our
text editor we have an html5 template
just laid out the important includes
that we need are the style sheet which I
have opened just here and I've included
that just here and we obviously need
jQuery included as well and I've kept
this in my J's folder so taking a look
at the directory structure we have index
dot PHP
we've got style dot CSS which can be
found in the CSS folder and we then have
jQuery j/s which is found in the jas
folder so we need to create an external
script that's going to handle specific
operations or specific event handler
handling so we need to go ahead and just
create a new document and I'm going to
save that inside the J's folder and I'm
going to call this hover text j s so now
I've got hover text at J s I want to go
and actually include this on my page so
we do exactly the same as we would with
jQuery and we just include this as a
script include inside of our page and
that's going to mean that everything we
write in javert XJS will be able to be
used inside of this page so hover text J
s okay so now that we've got that
included we're going to go ahead and
create a link and test some hover hover
over or sorry not hover over mousemove
event handling so let's go ahead and
create our link and I'm just going to
call this Google as I did before set the
link
location and let's go ahead and just
refresh our page so I've got Google the
standard link just on a page and it
works so we need to think about how
we're going to handle the hover while
hovering over this and then displaying
the div that we're going to create in
just a moment install dot CSS so let's
go ahead do a hobbit XJS in just a
moment I almost forgot to assign a class
to this I'm going to assign a class to
this called
hover link now by assigning a class to
this you can then go ahead and create
other elements on your page with the
same class and oh no I'm just going to
call this hover sorry we can assign a
class to any element on our page called
hover and that will allow us to take
advantage of the functionality that
we're going to build around this so now
that we've assigned a class to it we can
come over to hover text jas and we can
select this particular class so we use a
selector we use a dot and then we say
hover now we're going to assign an event
handler to this to handle the event when
the mouse moves over this particular
element or the element with the class
hover so I'm going to say mouse move now
inside here we need to go ahead and
create a function so I just outline a
function and let me just come down and
we can start writing code in here so the
code that I'm just going to write for
now is going to be alert mouse over or
mouse move and what this is going to do
is on any element that has hover ie our
link just at the moment when the mouse
moves over it we're going to allow our
mouse move so quite simple stuff but
when I move over you can see that it
says mouse move so now that we have this
in place we know that we've got the
functionality required to return perhaps
specific coordinates of where the mouse
is on this element