CODEWITHSUNDEEP
jquery
tirso
tirso

Reputation: 253

jquery hover parent div

I have a problem with the hover, I have a parent div and a child div. The problem is if i hover the parent div then the link "delete" appear in child div, but when I point my mouse in link "delete" it was blink. Maybe because mouseover and mouseout still work even I'm on child div.

thanks in advance Tirso

 <div onmouseover="delete_comment_show('.$row_comments->id.')" onmouseout="delete_comment_hide('.$row_comments->id.')">
     <div><div>   'this is the child div which link "delete" will appear"
 </div>

Upvotes: 0

Views: 6904

Answers (4)

beggs
beggs

Reputation: 4195

I would do this using the hover() method:

HTML:

<div id="comment-1" class="comment">
   <p>some content</p>
   <div class="delete">[x] Delete</div>  
</div>
<div id="comment-2" class="comment">
   <p>some content</p>  
   <div class="delete">[x] Delete</div>  
</div>

jQuery:

$(document).ready(function() {
   // hide the delete div(s)
   $('.delete').hide();
   // bind the click event of the delete div(s) to remove the parent 'comment' div
   $('.delete').bind('click', function() {
       $(this).parent('.comment').remove();
     }); 
   // bind the hover event, 
   // in callback calls show() on the child with class 'delete'
   // out callback calls hide() on the child with class ''delete'
   $('.comment').hover(function() {
       $(this).children('.delete').show();
     }, function() {
       $(this).children('.delete').hide();
     });
   });

Working example on JSBin

Upvotes: 1

Mottie
Mottie

Reputation: 86403

I wonder if you are having the flicker problem because of the difference in the parent div height once you hover over the child. I don't see your CSS so I can't tell for sure. One way to avoid this problem is to change it's visibility. Using display:none will hide the element so that it will not take up it's original space. Using visibility:hidden hides the content but leaves the original space of the object... I threw together some sample code using unobstrusive jQuery and a confirmation dialog box.

Notes

  • The row id to delete is contained in the name attribute of the parent class.
  • The parent div has the class name of deleteme, as IDs must be unique.
  • If the Delete link takes up too much space, you can replace the child div with a span to keep it inline.

HTML

<div class="deleteme" name="cid001">
 Hover over me #1 (comment id=cid001)
 <div> [X] Delete?</div>
</div>

<div class="deleteme" name="cid002">
  Hover over me #2 (comment id=cid002)
 <div> [X] Delete?</div>
</div>

Script

$(document).ready(function(){
 $('.deleteme').hover(function(){
  $(this).find('div').css('visibility','visible')
 },function(){
  $(this).find('div').css('visibility','hidden');
 });
 $('.deleteme div')
  .css('visibility','hidden')
  .click(function(){
  // Confirmation
  if (confirm("Are you sure?")){
   alert( "delete row with ID = " + $(this).parent().attr('name') ); // the name contains the comment ID to delete
  }
 })
})

Upvotes: 1

Soviut
Soviut

Reputation: 91515

don't use inline javascript if you're using JQuery! Add your script in a separate <script type="text/javascript>...</script> block. Then assign an id or class to your parent div in order for JQuery to select it and the hover() function to trigger a hide() and show():

<script type="text/javascript">
$(document).ready(function() {
    $('#myParent').hover(function() {
        $(this).children().show();
    },
    function() {
        $(this).children().hide();
    });
});
</script>

<div id="myParent">
    <div>delete</div>
</div>

Upvotes: 3

fernyb
fernyb

Reputation: 983

I think you want something like this? I'm not sure what you are trying to say.

jQuery("div#parent").bind("mouseover", function(){
  // Do mouse over code here
});

jQuery("div#parent").bind("mouseout", function(){
  // Do mouse out code here
});

Upvotes: 0

Related Questions