Response title
This is preview!
Move this topic
[jQuery] mouseover/mouseout vs. hover
in Using jQuery
•
15 years ago
I'm new to jQuery and I have to say I love it! I hate javascript but
now I like it cuz of query. Anyways enough of that :)
I'm a CSS developer also. I know that the :hover pseudo element
doesn't work in IE 6 so I always have to use javascript using
mouseover/mouseout events.
My question is, in jQuery is hover using the CSS or using acting as a
backend mouseover event?
Final question... what should i use hover or mouseover... making sure
it works on IE7, Firefox and IE6.
Thanks!
Replies(9)
Re: [jQuery] mouseover/mouseout vs. hover
15 years ago
The jQuery hover event is a javascript mouseover/mouseout event.
You would do:
$('element').hover(mouseOverEvent,mouseOutEvent);
One of the really nice things built into the hover event, is it deals with
parent/child elements cleanly. If you have a TD that contains a P and an A
element, but the hover is assigned to the TD, hover will prevent the
mouseover/mouseout from firing when you stay inside the TD and move around
the child P and A elements. This prevents a very annoying flickering.
I hope that made sense. :-)
JK
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] On
Behalf Of Charlie Concepcion
Sent: Thursday, June 14, 2007 1:35 PM
To: jQuery (English)
Subject: [jQuery] mouseover/mouseout vs. hover
I'm new to jQuery and I have to say I love it! I hate javascript but
now I like it cuz of query. Anyways enough of that :)
I'm a CSS developer also. I know that the :hover pseudo element
doesn't work in IE 6 so I always have to use javascript using
mouseover/mouseout events.
My question is, in jQuery is hover using the CSS or using acting as a
backend mouseover event?
Final question... what should i use hover or mouseover... making sure
it works on IE7, Firefox and IE6.
Thanks!
Leave a comment on jeffkretz's reply
Re: [jQuery] mouseover/mouseout vs. hover
15 years ago
I think u can use both, hover and mouseover. jQuery uses javascript to treat it.
<div><span class="gmail_quote">2007/6/14, Charlie Concepcion <<a href="mailto:charlieconcepcion@gmail.com">charlieconcepcion@gmail.com
</a>>:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
I'm new to jQuery and I have to say I love it! I hate javascript but
now I like it cuz of query. Anyways enough of that :)
I'm a CSS developer also. I know that the :hover pseudo element
doesn't work in IE 6 so I always have to use javascript using
mouseover/mouseout events.
My question is, in jQuery is hover using the CSS or using acting as a
backend mouseover event?
Final question... what should i use hover or mouseover... making sure
it works on IE7, Firefox and IE6.
Thanks!
</blockquote></div>
<br clear="all">
--
Rafael Santos Sá :: webdeveloper
<a href="http://www.rafael-santos.com">www.rafael-santos.com</a>
<div><span class="gmail_quote">2007/6/14, Charlie Concepcion <<a href="mailto:charlieconcepcion@gmail.com">charlieconcepcion@gmail.com
</a>>:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
I'm new to jQuery and I have to say I love it! I hate javascript but
now I like it cuz of query. Anyways enough of that :)
I'm a CSS developer also. I know that the :hover pseudo element
doesn't work in IE 6 so I always have to use javascript using
mouseover/mouseout events.
My question is, in jQuery is hover using the CSS or using acting as a
backend mouseover event?
Final question... what should i use hover or mouseover... making sure
it works on IE7, Firefox and IE6.
Thanks!
</blockquote></div>
<br clear="all">
--
Rafael Santos Sá :: webdeveloper
<a href="http://www.rafael-santos.com">www.rafael-santos.com</a>
Leave a comment on rafael.santos's reply
Re: [jQuery] mouseover/mouseout vs. hover
15 years ago
charlie,
(un)fortunately you'll have to do a bit of jquery magic, and i'd suggest
using the hover method, where you define two functions, one for when
mouse on, on for mouse off, like so:
$('div').hover(function(){
//do your mouseover magic, eg:
$(this).addClass('hover');
}, function() {
//mouseoff magic
$(this).removeClass('hover');
});
and all methods in jquery work in all browsers..
dennis.
Charlie Concepcion
Leave a comment on guest's reply
Re: [jQuery] mouseover/mouseout vs. hover
15 years ago
Ok I am new to this so here's my old code:
$(document).ready(function(){
$("#nav > li").mouseover(function(){
$(this).addClass("over");})
.mouseout(function(){
$(this).removeClass("over");});
});
I need that in hover version. I'm assuming it's supposed to be much
shorter.
Leave a comment on charlieconcepcion's reply
Re: [jQuery] mouseover/mouseout vs. hover
15 years ago
$(function(){ //shortcut for $(document).ready(){fn}
$("#nav > li").hover(function(){
$(this).addClass("over");
}),function(){
$(this).removeClass("over");
})
<div style="direction: ltr;">});</div>
<div><span class="gmail_quote">2007/6/14, Charlie Concepcion <<a href="mailto:charlieconcepcion@gmail.com">charlieconcepcion@gmail.com</a>>:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
Ok I am new to this so here's my old code:
$(document).ready(function(){
$("#nav > li").mouseover(function(){
$(this).addClass("over");})
.mouseout(function(){
$(this).removeClass("over");});
});
I need that in hover version. I'm assuming it's supposed to be much
shorter.
On Jun 14, 4:57 pm, "Rafael Santos" <<a href="mailto:shanex.f...@gmail.com">shanex.f...@gmail.com</a>
> wrote:
> I think u can use both, hover and mouseover. jQuery uses javascript to treat
> it.
>
> 2007/6/14, Charlie Concepcion <<a href="mailto:charlieconcepc...@gmail.com">charlieconcepc...@gmail.com
</a>>:
>
>
>
>
>
> > I'm new to jQuery and I have to say I love it! I hate javascript but
> > now I like it cuz of query. Anyways enough of that :)
>
> > I'm a CSS developer also. I know that the :hover pseudo element
> > doesn't work in IE 6 so I always have to use javascript using
> > mouseover/mouseout events.
>
> > My question is, in jQuery is hover using the CSS or using acting as a
> > backend mouseover event?
>
> > Final question... what should i use hover or mouseover... making sure
> > it works on IE7, Firefox and IE6.
>
> > Thanks!
>
> --
> Rafael Santos Sá :: <a href="http://webdeveloperwww.rafael-santos.com">
webdeveloperwww.rafael-santos.com</a>
</blockquote></div>
<br clear="all">
--
Rafael Santos Sá :: webdeveloper
<a href="http://www.rafael-santos.com">www.rafael-santos.com</a>
$("#nav > li").hover(function(){
$(this).addClass("over");
}),function(){
$(this).removeClass("over");
})
<div style="direction: ltr;">});</div>
<div><span class="gmail_quote">2007/6/14, Charlie Concepcion <<a href="mailto:charlieconcepcion@gmail.com">charlieconcepcion@gmail.com</a>>:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
Ok I am new to this so here's my old code:
$(document).ready(function(){
$("#nav > li").mouseover(function(){
$(this).addClass("over");})
.mouseout(function(){
$(this).removeClass("over");});
});
I need that in hover version. I'm assuming it's supposed to be much
shorter.
On Jun 14, 4:57 pm, "Rafael Santos" <<a href="mailto:shanex.f...@gmail.com">shanex.f...@gmail.com</a>
> wrote:
> I think u can use both, hover and mouseover. jQuery uses javascript to treat
> it.
>
> 2007/6/14, Charlie Concepcion <<a href="mailto:charlieconcepc...@gmail.com">charlieconcepc...@gmail.com
</a>>:
>
>
>
>
>
> > I'm new to jQuery and I have to say I love it! I hate javascript but
> > now I like it cuz of query. Anyways enough of that :)
>
> > I'm a CSS developer also. I know that the :hover pseudo element
> > doesn't work in IE 6 so I always have to use javascript using
> > mouseover/mouseout events.
>
> > My question is, in jQuery is hover using the CSS or using acting as a
> > backend mouseover event?
>
> > Final question... what should i use hover or mouseover... making sure
> > it works on IE7, Firefox and IE6.
>
> > Thanks!
>
> --
> Rafael Santos Sá :: <a href="http://webdeveloperwww.rafael-santos.com">
webdeveloperwww.rafael-santos.com</a>
</blockquote></div>
<br clear="all">
--
Rafael Santos Sá :: webdeveloper
<a href="http://www.rafael-santos.com">www.rafael-santos.com</a>
Leave a comment on rafael.santos's reply
Re: [jQuery] mouseover/mouseout vs. hover
15 years ago
Thanks Rafael... Thanks Everyone!
It works great, man I'm loving this simple jQuery syntax.
One more question though... why use the shorcut version vs.
document.ready?
I mean if this is the case why'd they even make document.ready?
Leave a comment on charlieconcepcion's reply
Re: [jQuery] mouseover/mouseout vs. hover
15 years ago
<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; ">Hi Charlie,<DIV><BR class="khtml-block-placeholder"></DIV><DIV>Sorry I'm late to this thread. If you want more info on this, you can check out this entry I posted a while back:</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV><A href="http://www.learningjquery.com/2007/02/quick-tip-set-hover-class-for-anything">http://www.learningjquery.com/2007/02/quick-tip-set-hover-class-for-anything</A><BR><DIV> <SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><BR class="Apple-interchange-newline"><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV><BR class="khtml-block-placeholder"></DIV><DIV>--Karl</DIV><DIV>_________________</DIV><DIV>Karl Swedberg</DIV><DIV>www.englishrules.com</DIV><DIV>www.learningjquery.com</DIV><DIV><BR class="khtml-block-placeholder"></DIV><BR class="Apple-interchange-newline"></SPAN></SPAN> </DIV><BR><DIV><DIV>On Jun 14, 2007, at 5:02 PM, Charlie Concepcion wrote:</DIV><BR class="Apple-interchange-newline"><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Ok I am new to this so here's my old code:</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">$(document).ready(function(){</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">$("#nav > li").mouseover(function(){</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>$(this).addClass("over");})</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">.mouseout(function(){</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>$(this).removeClass("over");});</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">});</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">I need that in hover version. I'm assuming it's supposed to be much</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">shorter.</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">On Jun 14, 4:57 pm, "Rafael Santos" <shanex.f...@gmail.com> wrote:</DIV> <BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">I think u can use both, hover and mouseover. jQuery uses javascript to treat</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">it.</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">2007/6/14, Charlie Concepcion <charlieconcepc...@gmail.com>:</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">I'm new to jQuery and I have to say I love it! I hate javascript but</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">now I like it cuz of query.<SPAN class="Apple-converted-space"> </SPAN>Anyways enough of that :)</DIV> </BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">I'm a CSS developer also. I know that the :hover pseudo element</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">doesn't work in IE 6 so I always have to use javascript using</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">mouseover/mouseout events.</DIV> </BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">My question is, in jQuery is hover using the CSS or using acting as a</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">backend mouseover event?</DIV> </BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Final question... what should i use hover or mouseover... making sure</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">it works on IE7, Firefox and IE6.</DIV> </BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> <BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Thanks!</DIV> </BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">--</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Rafael Santos Sá :: webdeveloperwww.rafael-santos.com</DIV> </BLOCKQUOTE><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> </BLOCKQUOTE></DIV><BR></DIV></BODY></HTML>
Leave a comment on kswedberg's reply
Re: [jQuery] mouseover/mouseout vs. hover
15 years ago
$(document).ready is the original and is what happens behind the scenes ... the shortcut is because we don't like typing. :)
--
Brandon Aaron
<div><span class="gmail_quote">On 6/14/07, <b class="gmail_sendername">
Charlie Concepcion</b> <<a href="mailto:charlieconcepcion@gmail.com">charlieconcepcion@gmail.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
Thanks Rafael... Thanks Everyone!
It works great, man I'm loving this simple jQuery syntax.
One more question though... why use the shorcut version vs.
document.ready?
I mean if this is the case why'd they even make
document.ready?
On Jun 14, 5:10 pm, "Rafael Santos" <<a href="mailto:shanex.f...@gmail.com">shanex.f...@gmail.com</a>> wrote:
> $(function(){ //shortcut for $(document).ready(){fn}
> $("#nav > li").hover(function(){
> $(this).addClass("over");
> }),function(){
> $(this).removeClass("over");
> })
>
> });
>
> 2007/6/14, Charlie Concepcion <<a href="mailto:charlieconcepc...@gmail.com">
charlieconcepc...@gmail.com</a>>:
>
>
>
>
>
> > Ok I am new to this so here's my old code:
>
> > $(document).ready(function(){
> > $("#nav > li").mouseover(function(){
> > $(this).addClass("over");})
> > .mouseout(function(){
> > $(this).removeClass("over");});
> > });
>
> > I need that in hover version. I'm assuming it's supposed to be much
> > shorter.
>
> > On Jun 14, 4:57 pm, "Rafael Santos" <<a href="mailto:shanex.f...@gmail.com">shanex.f...@gmail.com</a>> wrote:
> > > I think u can use both, hover and mouseover. jQuery uses javascript to
> > treat
> > > it.
>
> > > 2007/6/14, Charlie Concepcion <<a href="mailto:charlieconcepc...@gmail.com">charlieconcepc...@gmail.com</a>>:
>
> > > > I'm new to jQuery and I have to say I love it! I hate javascript but
> > > > now I like it cuz of query. Anyways enough of that :)
>
> > > > I'm a CSS developer also. I know that the :hover pseudo element
> > > > doesn't work in IE 6 so I always have to use javascript using
> > > > mouseover/mouseout events.
>
> > > > My question is, in jQuery is hover using the CSS or using acting as a
> > > > backend mouseover event?
>
> > > > Final question... what should i use hover or mouseover... making sure
> > > > it works on IE7, Firefox and IE6.
>
> > > > Thanks!
>
> > > --
> > > Rafael Santos Sá :: <a href="http://webdeveloperwww.rafael-santos.com">webdeveloperwww.rafael-santos.com
</a>
>
> --
> Rafael Santos Sá :: <a href="http://webdeveloperwww.rafael-santos.com">webdeveloperwww.rafael-santos.com</a>
</blockquote></div>
--
Brandon Aaron
<div><span class="gmail_quote">On 6/14/07, <b class="gmail_sendername">
Charlie Concepcion</b> <<a href="mailto:charlieconcepcion@gmail.com">charlieconcepcion@gmail.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
Thanks Rafael... Thanks Everyone!
It works great, man I'm loving this simple jQuery syntax.
One more question though... why use the shorcut version vs.
document.ready?
I mean if this is the case why'd they even make
document.ready?
On Jun 14, 5:10 pm, "Rafael Santos" <<a href="mailto:shanex.f...@gmail.com">shanex.f...@gmail.com</a>> wrote:
> $(function(){ //shortcut for $(document).ready(){fn}
> $("#nav > li").hover(function(){
> $(this).addClass("over");
> }),function(){
> $(this).removeClass("over");
> })
>
> });
>
> 2007/6/14, Charlie Concepcion <<a href="mailto:charlieconcepc...@gmail.com">
charlieconcepc...@gmail.com</a>>:
>
>
>
>
>
> > Ok I am new to this so here's my old code:
>
> > $(document).ready(function(){
> > $("#nav > li").mouseover(function(){
> > $(this).addClass("over");})
> > .mouseout(function(){
> > $(this).removeClass("over");});
> > });
>
> > I need that in hover version. I'm assuming it's supposed to be much
> > shorter.
>
> > On Jun 14, 4:57 pm, "Rafael Santos" <<a href="mailto:shanex.f...@gmail.com">shanex.f...@gmail.com</a>> wrote:
> > > I think u can use both, hover and mouseover. jQuery uses javascript to
> > treat
> > > it.
>
> > > 2007/6/14, Charlie Concepcion <<a href="mailto:charlieconcepc...@gmail.com">charlieconcepc...@gmail.com</a>>:
>
> > > > I'm new to jQuery and I have to say I love it! I hate javascript but
> > > > now I like it cuz of query. Anyways enough of that :)
>
> > > > I'm a CSS developer also. I know that the :hover pseudo element
> > > > doesn't work in IE 6 so I always have to use javascript using
> > > > mouseover/mouseout events.
>
> > > > My question is, in jQuery is hover using the CSS or using acting as a
> > > > backend mouseover event?
>
> > > > Final question... what should i use hover or mouseover... making sure
> > > > it works on IE7, Firefox and IE6.
>
> > > > Thanks!
>
> > > --
> > > Rafael Santos Sá :: <a href="http://webdeveloperwww.rafael-santos.com">webdeveloperwww.rafael-santos.com
</a>
>
> --
> Rafael Santos Sá :: <a href="http://webdeveloperwww.rafael-santos.com">webdeveloperwww.rafael-santos.com</a>
</blockquote></div>
Leave a comment on brandon_aaron's reply
Leave a comment on charlieconcepcion's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to charlieconcepcion's discussion
Statistics
- 9 Replies
- 1663 Views
- 0 Followers