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

and that will allow us to assign the div
that we're gonna create which will
contain the description so just as an
example I'm gonna go ahead and create an
just a div down here and this will allow
me to relay back the coordinates of the
my mouse position now the reason I'm
doing this is just so we can see how
everything works before we start to
write the code because it's important to
know what you're actually obviously
doing when you're writing the code and
this often I create divs just to give me
an idea of the feedback so I'm just
gonna call this a CO just short for
coordinates I guess
and inside of Javert Javert XJS I'm
gonna go ahead and relay some
coordinates into this Co div now there's
one thing that we need to do we need to
return a particular object associated
with moving the mouse over this
particular element and we need to use
well we need to prove just a variable
name inside here and E is now an object
and this represents a few things but
we're going to be using the the client Y
and the client X parts of this object so
what I want to do is now inside of here
I want to say dot txt we're just going
to be placing text with this inside this
div here obviously it's invisible on the
page but once we start to hover over
we'll start to return some feedback so
inside dot text I want to place some
text now usually the text would be like
this and then when you were to go and
hover over this the text would appear so
what we can do this is we can constantly
feedback something from this e object
that we've called E and this is first of
all client Y we have x and y coordinates
of where the mouse is at so I'm just
going to say for example and this is
just to append on this I'm going to say
we'll say X first
and that's a client X and then I'm gonna
append on just a space and then Y and
I'm gonna append on e dot client Y so
what we're doing is when the mouse is
moved over we're taking the X&Y position
from this object and we're just saying X
will we're displaying this to the user
and then we're taking client X from this
e object and then what we're doing is
we're showing Y and we're doing the same
but we're taking the client Y part of
this object so now you'll see that when
we move our mouse over here we get an
accurate display of chord coordinates so
we can we can see where the the mouse is
at its position now this is relative to
the entire document you'll probably
notice if I come just up to the top of
this link here you see we've got 10 and
12 now this is because the x and y
starts from here the very top left-hand
corner and then stretches down to the
end of the document
so what we're essentially doing is
wherever this element is placed on our
page we're not placing the div with the
coordinates relative to the object we're
placing it relative to the whole
document so maybe that doesn't make
sense maybe it's not relevant but it's
important to know that these coordinates
don't represent the entire stretch of
this object or the size of this object
it's for the whole document itself so
regardless of that it will still work so
we can go ahead and actually start to
display this a particular coordinates so
now that we've seen that example we can
get rid of that and we can go ahead and
get rid of the div that was just a
display that out in - it's not not
needed now so the first thing we want to
do is we want to be able to return a
description of a particular object so in
this case case it's a link now I'm gonna
create a custom attribute onto the
inside of this link and that's going to
be called hover text so I'm just gonna
right hover text equals something so
much like href and class and anything
else with
taking an attribute from this link so
here I'm gonna write Google a power full
search engine so now what we can do is
when we hover over this we can obtain
the the attribute hover text which is
associated with this object and again if
you were to go ahead and create more
objects you could just simply apply the
class hover and then go ahead and apply
the class hover the sorry the class
hover and the attributes hover text so
this is essentially what we did is going
to be displaying to the user when they
hover over a particular element so quite
simple but we need to find a way to grab
this hover text attribute from this
current class now it's important to note
that if we were to have say two
different links let's just go ahead and
paste this down here let's just change
this
link here and change this description
and then change the what's displayed to
the user so now we've got two links we
have two different attributes so we've
got hover text and hover text they're
both the same but they both hold
different values and we want them to
display different values we're keeping
the same class name however we want the
hover text to remain different so what
we can do is we can test out taking this
attribute from the current element
that's being hovered over now because we
have that have the same class name we
can't just reference from that
particular class and I'll show you why
we can't do that so I'm going to first
of all set a variable called description
or just call it hover text and that's
going to be equal to and remember when
we use a selector we use dot something
so dot hover dot attribute and then we
name the attribute