here:
http://www.jsfiddle.net/JEXru/1/
i don't know how to make it so if you hover over the slide it stays active ... help?
1
-
I'd first fix your markup so your <ul> only contains <li> elements as immediate children.typeof– typeof2011-01-19 02:06:29 +00:00Commented Jan 19, 2011 at 2:06
Add a comment
|
2 Answers
Change your javascript to this:
$(function() {
$('.slide').hide();
$('.title:first').css({
'margin-left': '1px #333 solid'
});
$('ul#horzAccordion ul').hover(
function() {
var slideLink = $(this).children('a').attr('name');
$(slideLink).animate({
'width': '320px'
}).show();
}, function() {
var slideLink = $(this).children('a').attr('name');
$(slideLink).animate({
'width': '0px'
}, 300).hide();
});
});
What you were doing is setting the hover event on just the link which only encompasses the first LI (the link surrounding the list item is invalid html by the way you will want to move that to inside the LI). So when your mouse moved away from the link it closed. The updated javascript sets the hover on the interior UL so that you can interact with the shown contents.
Let me know if you have any questions on the above.
edit: code formatting.
Comments
For what you want, you don't need any Javascript. Add these to your CSS:
#horzAccordion ul li.slide { display: none; }
#horzAccordion ul:hover li.slide { display: block; }
Then remove your hover jQuery function and $('.slide').hide();.
4 Comments
Adrian
He might want that smooth animation of it opening since he is setting the easing in his jquery call
lepe
Yea... in that case then JS is the only way... Using just CSS is faster though.
Adrian
One thing to watch for when using :hover on non <a> elements is it can cause performance issues in IE. But generally I like pure css solutions when they fit the design. stackoverflow.com/questions/4204527/…
Baruch
I actually had this, but as antonlavey said, I do want the smooth animation.