jQuery Tutorial - 51 - Hover over description Video Lecture | Importance of jQuery in Website Development - IT & Software

so we can go ahead and again use a
selector for hover div and we want to
say dot show first of all we want to
show this this div or in fact first we
want to set the text for this div so by
using text we're placing text in between
here and then therefore that's going to
display correctly so the text is
obviously hover text because we've
already gained this unique attribute
that we've given it then we want to go
ahead and shove it and what this will do
is it will just modify this display
property to actually display it so what
we're doing is onmouseover we're
grabbing the hover text attribute which
we gave in inside the link here then
what we go ahead to do is let's just
bring this down is set the text inside
of our hover div and then show it and
then bind or change the CSS properties
of the hover div to the current mouse
position so in essence it's quite a
simple idea and quite easy to produce
something like this however we are going
to have a few problems and we're going
to take a look at them just now so now
you can see that when I hover over I
have this box display now the first
problem you notice is this is a bit
jumpy and the reason for this is let's
go ahead and refresh again so I'm gonna
hover over from this side and it works
up into a point where I have to move my
mouse back again and now you can see
that you know it's we just have we just
have our text on on what we just have
our cursor on this div so it really at
the moment is useless because the user
is gonna be fiddling around with this
and it doesn't look very nice and it
doesn't work very well so we need to
make a couple of small adjustments to
allow us to work properly and what we're
gonna do is we're gonna add a value of
10 onto the current Y position so this
will actually move the div 10 pixels in
the in the in the top downwards and the
left across so now that I've made this
small change by just adding 10 on to
each of these properties now in a hover
over
you can see that the it doesn't affect
it it doesn't the mouse is you know it's
the mouse is over this but it's not
affecting it when I pull it back but we
also have this problem as when we leave
the element the div isn't isn't hidden
remember we automatically have this
hidden but we don't have an event to
handle when the mouse comes off of the
element to actually hide it so we want
to go ahead and actually hide this now
so what we can do is onto the end of our
selector for our hover class remember
this starts here and ends with this
bracket just here we can go ahead and
assign another event handler onto this
and that is Mouse out
so inside Mouse out we want to do
exactly the same thing as we do and
create a function and just bring this
down however the only thing we need to
write inside of here is to hide the
hover div so hovered if we use the
selector to select the hover div and we
just say hide so now what's going to
happen is when the mouse goes over this
element we perform what we've already
seen to be working and when it comes
away we just hide the div now if the
mouse was to go back onto the map and on
to this element it would just repeat the
process so it's almost like a cycle so
now what's going to happen is we have
our working element however when we pull
away it disappears so it doesn't you
know remain on the page so now we have
the effect that we've been looking for
as we hover over the div isn't
interfering with the cursor and when we
move away the div element disappears
again so this is all well and good but
we want to know that we can go ahead and
use it on any other element so I'm just
gonna go ahead and wrap this link in
paragraph tags and I'm gonna come down
and I'm going to create a new paragraph
with an image inside of it
so this is essentially the steps that we
would go through if we wanted to apply
this effect to another element now we've
got our hover class div up there there's
no need to duplicate this for any reason
because it's dynamic it'll change
depending on which element so the image
source is Tartan jpg that's an image
just inside my my root directory notice
this still obviously works and we want
to apply the same effect to this image
so we want to apply the hover class to
this image so hover and then we also
want to apply this hover text attribute
that we created and explained earlier so
I'm gonna say a lovely Tartan image or
pattern so now that we've done this
we've just simply created an image and
the only two things we've done is
applied this class to it which is picked
up here and we've then gone and applied
this hover text which is picked up here
remember using this so we're using a
unique attribute for the particular for
a particular element so let's go ahead
and preview this our our link works us
as it would now when we hover over our
image we have the same effect with
different text now let me just explain
quickly the process that again if you're
not too sure in this the process that
this goes through so now that we've
hovered over we've shown the div we've
assigned it to the particular cursor
which will always happen because jQuery
handles this event for us and we've
applied the text Google a powerful
search engine to the div on our page
here now when we hover away that
particular div is hidden then now the
text will still remain assigned to that
div however when we hover over the image
we assign the new description to that
div and then we show that div as well as
well as you know repeating the process
for assigning it to the coordinates arm
out there I'm at our mouse are at is at
so we're essentially done if like I said
at the start of the tutorial if you
wanted to go ahead and apply this to
your own website all you would have to
do is go ahead and include this Java Tex
Jas file on any page that you'd want to
use it or in a global JavaScript file
that you might be using for your website
obviously you need the use of jQuery and
all you need to a place on your page is
this div element here but then again you
could go ahead and probably include it
on another page or something so that was
an extremely simple way of creating a
hover over description using jQuery but
we've tailored it to make sure that it
works properly and looks okay and most
importantly we've made it so we can use
it with lots of different elements