First let me
state that I'm a jquery noob, so this may not make a lot of sense.
So I have a series of list items that expand to show a hidden div inside if the user mouses over a link inside the item (not the whole list item itself)
The problem is that if the users mouse leaves the link the li closes up again.
I need this to work in a way so that the li only closes if you mouse over a link in another li. (sorry this is kind of hard to put into words)
Heres my code.
$(document).ready(function(){
$(".home_upcoming_title").hoverIntent({
over: makeTall,
timeout: 500,
out: makeShort
});
}); // close document.ready
function makeTall(){$(this).parents("li").animate({"height":200},200);}
function makeShort(){$(this).parents("li").animate({"height":32},200);}
and the HTML
<li class="p1">
<ul class="home_upcoming_list2" id="fade">
<li class="home_upcoming_date">Sat.Sept.23rd.2010</li>
<li><a href="./." class="home_upcoming_title" >Event Title</a></li>
<li class="home_upcoming_city">Los Angeles</li>
<li class="home_upcoming_type">Festival</li>
<li class="home_upcoming_venue">Venue</li>
<li class="home_upcoming_age">18+</li>
<li><a href="./." title="Buy Tickets" class="home_upcoming_tix">Buy Tickets</a></li>
<li><a href="./." class="upcoming_info" title="View Details"></a></li>
</ul>
<div style="height:150px; background-color:#FF0000; display:block;" class="sl0w"></div>
</li>
so the link with the class "home_upcoming_title" expands li to show the div inside but when I mouse over the div itself the list closes. I also need it so only the class "home_upcoming_title" expands the div. but it needs to stay open until you mouse over another link with the same class.
sorry if that doesn't make much sense :)
