CODEWITHSUNDEEP
javascriptjqueryhtmlcss
The Duke Of Marshall שלום
The Duke Of Marshall שלום

Reputation: 1659

Javascript Mouseover Event Acting Squirrely

I'm trying to show a div container with child elements and just have the top portion of the container shown until the mouse moves over it and then show the entire container with the child elements with the content. This sorta works like I'm wanting it to, but the problem is that if you move the mouse over any of the child elements the entire main container slides back up and then slides back down again. I'm trying to make it so that the entire container slides down on MouseOver and stays down until MouseOut when it should slide back up.

<div onmouseover="$('#id_content').slideDown('fast', function(){ $(this).css('display', 'block'); $(this).css('visibility', 'visible'); });" 
 onmouseout="$('#id_content').slideUp('fast', function(){ $(this).css('display', 'none'); $(this).css('visibility', 'hidden'); });">
Title
<BR> 
mm/dd/yyyy hh:mm - hh:mm
<div id="id_content" style="visibility: hidden; display: none;">
    Description 
    <BR>
    Content 
</div>
<span class="commands"> <!-- Goes in the top right hand corner of the main container -->
    <span class="delete" onclick="delete_entry('record_id')">X</span>
</span>
</div>

Upvotes: 0

Views: 80

Answers (3)

Halcyon
Halcyon

Reputation: 57719

You want mouseenter and mouseleave. They are combined by jQuery in hover.

In JavaScript you can detect when an onmouseout is an onmouseleave or whether you're just mousing over a child element. Check if event.relatedTarget is a child element.

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382130

jQuery has a function for that : hover.

It also would allow you to avoid inlining the event handlers :

  <script>
    $('#a').hover(function(){
      $('#id_content').slideDown('fast', function(){ $(this).css('display', 'block'); $(this).css('visibility', 'visible'); });
    }, function(){
      $('#id_content').slideUp('fast', function(){ $(this).css('display', 'none'); $(this).css('visibility', 'hidden'); });
    });
  </script>

Demonstration

Upvotes: 1

cowls
cowls

Reputation: 24334

It looks like you are using JQuery anyway, so don't use onmouseover events.

Use the JQuery hover method instead: http://api.jquery.com/hover/

It allows you to provide a function when the mouse enters and object and when a mouse leaves an object.

Whilst youre at it I'd replace the onclick event with JQuerys .click() method. http://api.jquery.com/click/

Upvotes: 1

Related Questions