Search jQuery

jQuery Forum

Problem w/ jQuery mouseOut/mouseOver -- navigation bar hover

in Getting Started • 11 years ago

Hey guys!

So I'm working on a navigation bar right now...wanting to integrate hover drop-down menus for the titles. I can't get the "mouseover"/"mouseout" functions to work. Here's the code, I'd be thrilled if somebody could fill me in on why this won't work. Thanks so much!

$(document).ready(function() {

$("#dropbar").hide();

$("#backdrop").hide();

$("#11").hide();

$("#12").hide();

$("#13").hide();

$("experience").mouseover(function(){

$("#dropbar").slideDown(400);

$("#backdrop").delay(500).fadeIn(1).animate({height:80, width:79},"fast");

$("#11").delay(750).fadeIn(1).animate({height:30, width:79},"fast");

$("#12").delay(800).fadeIn(1).animate({height:30, width:79},"fast");

$("#13").delay(850).fadeIn(1).animate({height:30, width:79},"fast");

});

$("experience").mouseout(function(){

$("#13").delay(2100).animate({height:30, width:0},"fast").hide(1);

$("#12").delay(2200).animate({height:30, width:0},"fast").hide(1);

$("#11").delay(2300).animate({height:30, width:0},"fast").hide(1);

$("#backdrop").delay(2600).animate({height:80, width:0},"fast").hide(1);

$("#dropbar").delay(2900).slideUp(400).hide(1);

});

</script>

<div id="experience" style="font-size:20px; width:300px; height:50px;"> <a href="#" style="text-decoration:none; color:#FFF">experience</a></div>

<div id="11" style="z-index:19; position:absolute; top:6px; left:2px; width:1px; height:30px; text-align:center;" > <a href= "http://www.listen.org" style="text-decoration:none; color:#FFF">listen</a> </div>

<div id="12" style="z-index:19; position:absolute; top:31px; left:2px; width:1px; height:30px; text-align:center;" > <a href="http://www.listen.org" style="text-decoration:none; color:#FFF">watch</a> </div>

</div>

---

Thanks again!

-Casey

Replies(5)

charlietfl

Re: Problem w/ jQuery mouseOut/mouseOver -- navigation bar hover

11 years ago

$("experience") is an invalid jQuery selector. Prefix ID's with "#" as you do with css

ID's can not start with a numeral per W3C specs.

Always helps to point towards what is and isn't working when you dump a bunch of code into thread. "Doesn't work" is not much of a clue. Posting a link to page with problem also helps, a lot can be seen quickly in browsers and their consoles

stag14

Re: Problem w/ jQuery mouseOut/mouseOver -- navigation bar hover

11 years ago

Thanks so much; that was disgustingly obvious, but you saved me a ton of time. =)

My apologies for the lack of a solid description, and I've actually got another question for you...I was able to get the menu setup how I wanted, with "mouseover" staying active while hovering on the menu itself...but the "subtext" is doing some crazy things now. I setup a test page on a buddy's website; if you could take a look, I would appreciate it!

http://e3west.com/testing/navSlide.html

It seems to me as if the animations for the "subtext" are firing every time I hover onto or off of them. Let me know if that's not clear!

-Casey

charlietfl

Re: Problem w/ jQuery mouseOut/mouseOver -- navigation bar hover

11 years ago

it has to do with dropbar...when you display it, mouse is over it and therefore has left the experience div which triggers the mouseout...which hides the dropbar and triggers mouseover.

If it was contained within experience mousout wouldn't occur because dropbar is shown as it would be a child of experience

stag14

Re: Problem w/ jQuery mouseOut/mouseOver -- navigation bar hover

11 years ago

Alrighty...

I changed the "dropbar" div to fall within the "experience" div, but that didn't change it. I also lowered the "dropbar" z-index and constrained it's proportions to make sure it wasn't overlapping the hover "area"...still nothing.

I've uploaded my changes here: http://e3west.com/testing/navSlide.html

Any other suggestions? Thanks again!

-Casey

stag14

Re: Problem w/ jQuery mouseOut/mouseOver -- navigation bar hover

11 years ago

I wanted to put this in here, just in case somebody else stumbles onto this thread with the same problem.

Apparently, jQuery's ".hover" is better suited than its ".mouseover"/".mouseout" for what I was trying to accomplish. It's also worth noting that I increased the height of the "experience" div to get rid of the invisible gap between the menu title and the black backdrop.

Here's the code that I ended up with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

body, td, th

{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFF}

body

{background-color:#ea001c}

</style>

</head>

<body>

$(document).ready(function() {

$("#dropbar").hide();

$("#backdrop").hide();

$("#11").hide();

$("#12").hide();

$("#13").hide();

$("#experience").stop(true, true).hover(function(){

$("#dropbar").stop(true, true).slideDown(400);

$("#backdrop").stop(true, true).delay(400).fadeIn(1).animate({height:80, width:79},"fast");

$("#11").stop(true, true).delay(650).fadeIn(1).animate({height:14, width:79},"fast");

$("#12").stop(true, true).delay(650).fadeIn(1).animate({height:14, width:79},"fast");

$("#13").stop(true, true).delay(650).fadeIn(1).animate({height:14, width:79},"fast");

function() {

$("#13").stop(true, true).animate({height:14, width:0},"fast").hide(1);

$("#12").stop(true, true).animate({height:14, width:0},"fast").hide(1);

$("#11").stop(true, true).animate({height:14, width:0},"fast").hide(1);

$("#backdrop").stop(true, true).delay(300).animate({height:80, width:0},"fast").hide(1);

$("#dropbar").stop(true, true).delay(500).slideUp(400).hide(1);

});

</script>

<div id="11" style="z-index:18; position:absolute; top:8px; left:2px; width:1px; height:30px; text-align:center;" > <a href= "http://www.listen.org" style="text-decoration:none; color:#FFF;">listen</a> </div>

<div id="12" style="z-index:18; position:absolute; top:33px; left:2px; width:1px; height:30px; text-align:center;" > <a href="http://www.listen.org" style="text-decoration:none; color:#FFF">watch</a> </div>

</div>

</div>

</body>

----

Hope this is useful for someone else, too! =)

-Casey

Top Reply

Response title

Attachments

jQuery Forum

Problem w/ jQuery mouseOut/mouseOver -- navigation bar hover

Replies(5)

Re: Problem w/ jQuery mouseOut/mouseOver -- navigation bar hover

Re: Problem w/ jQuery mouseOut/mouseOver -- navigation bar hover

Re: Problem w/ jQuery mouseOut/mouseOver -- navigation bar hover

Re: Problem w/ jQuery mouseOut/mouseOver -- navigation bar hover

Re: Problem w/ jQuery mouseOut/mouseOver -- navigation bar hover

Statistics

Tags

Actions