[jQuery] Re: hover problems
Check out the Hover Intent plugin here:
http://cherne.net/brian/resources/jquery.hoverIntent.html
I think it's just what you're looking for.
Rick
On Thu, Apr 16, 2009 at 12:28 AM, 3daysaside 3daysas...@gmail.com wrote:
Been searching for the last hour, found some solutions, but still not
good enough.
I have a navigation menu -- when I hover over a header, I want the
submenus to slideDown, and then on hoverOut, I want it to slide back
in. First, I was having problems with it only displaying 2 or 3 of
the dropdown items if I got crazy with the hovering (on, off, on, off
quite rapidly). Then I found the .css(overflow:visible) fix. That
causes the menu to at least always display all the items, but the
effect is lost if you hover on/off quickly.
What am I missing? This can't be this hard.
Here's the link:
http://www.threedaysaside.com/cep
Javascript:
$(document).ready(function() {
$(.sub_div).hide();
/*$(.sub_div).css('opacity', 0.9);*/
$(.subnav_a).hover(function() {
$(.sub_div).stop().css('overflow',
'visible').slideDown(800);
}, function() {
$(.sub_div).stop().css('overflow',
'visible').slideUp(300);
});
});
The Residential link is the only one with a dropdown. And don't worry
about the styling, I haven't even had a chance to worry about it
myself yet.
--
-
It has been my experience that most bad government is the result of too
much government. - Thomas Jefferson
[jQuery] Re: hover problems
the technique here might be of interest:
http://www.ihwy.com/Labs/demos/Current/image-hover-menu.aspx
- Jack
Rick Faircloth wrote:
Check out the Hover Intent plugin here:
http://cherne.net/brian/resources/jquery.hoverIntent.html
I think it's just what you're looking for.
Rick
On Thu, Apr 16, 2009 at 12:28 AM, 3daysaside 3daysas...@gmail.com
mailto:3daysas...@gmail.com wrote:
Been searching for the last hour, found some solutions, but still not
good enough.
I have a navigation menu -- when I hover over a header, I want the
submenus to slideDown, and then on hoverOut, I want it to slide back
in. First, I was having problems with it only displaying 2 or 3 of
the dropdown items if I got crazy with the hovering (on, off, on, off
quite rapidly). Then I found the .css(overflow:visible) fix. That
causes the menu to at least always display all the items, but the
effect is lost if you hover on/off quickly.
What am I missing? This can't be this hard.
Here's the link:
http://www.threedaysaside.com/cep
Javascript:
$(document).ready(function() {
$(.sub_div).hide();
/*$(.sub_div).css('opacity', 0.9);*/
$(.subnav_a).hover(function() {
$(.sub_div).stop().css('overflow',
'visible').slideDown(800);
}, function() {
$(.sub_div).stop().css('overflow',
'visible').slideUp(300);
});
});
The Residential link is the only one with a dropdown. And don't worry
about the styling, I haven't even had a chance to worry about it
myself yet.
--
-
It has been my experience that most bad government is the result of
too much government. - Thomas Jefferson
[jQuery] Re: Hover Problems
div class='item' div class='img_cont' div class='item_info'264 VIEWS/div img tag is in here /div /div
[jQuery] Re: Hover Problems
You have to scope the hover to the current image, otherwise all div
with class item_info will show up (because, by default $(selector)
operates on the entire document, like $(selector, document)), here
is how you do this:
Assuming an HTML structure like this:
div class='item'
div class='img_cont'
div class='item_info'264 VIEWS/div
img src=some-img.gif/
/div
/div
$('.item img').hover(function() {
$(this).siblings(.item_info).animate({ opacity: 'show' }, 700);
}, function() {
$(this).siblings(.item_info).animate({ opacity: 'hide' }, 700);
});
Check out the documentation for how selectors work here:
http://docs.jquery.com/Core/jQuery#expressioncontext
and here:
http://docs.jquery.com/Selectors
- jake
On Sun, Apr 13, 2008 at 12:46 PM, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
I am creating my first site with jquery. (Its my first time with
javascript, and I love it)
I have most of it ready, one thing I am completely stuck on.
I have a bunch of images that when you hover over each one there
should be a div appearing. Right now when I hover over any image the
div appears on all images. I only want it to appear on the image that
you are hovering over and not on all instances of the image. I tried a
lot of things, I need some help.
my html:
div class='item'
div class='img_cont'
div class='item_info'264 VIEWS/div
/div
/div
( the div that should be showing up is item_info which by default is
display:none; . )
$('.item img').hover(function() {
$(.item_info).animate({ opacity: 'show' }, 700);
}, function() {
$(.item_info).animate({ opacity: 'hide' }, 700);
});
--
Right now there are about 30 of the same divs with class image and
img's in them. When I hover over any image I see all divs on all
images popping up. How do I target just that one single image div
that the mouse is over, so that I can have the div popup whenever the
mouse is only over the one image.
Thank you
- Lukas
