CODEWITHSUNDEEP
jqueryvisibilityeachmouseentermouseleave
Hikaru Kagi
Hikaru Kagi

Reputation: 5

change visibility for each div on mouseenter/mouseleave jquery

I've looked at all the documentation on the jquery website, and I've also searched on all the questions related to my problem, but I have not found a solution. What I'm wanting to do is when you hover on the post class is to make the links in post span a to appear and to dissapear when the mouse leaves obviously... Right now, the only thing that is happening, is that when I hover over one of the post classes, the links will appear for every div, but I don't want that, I just want it like what happens on a twitter post, for example, when hover the posts, the reply, retweet, favorite, and more links appear. I want it like that.

$(function(){
  $.each(function(){
    $(".post").mouseenter(function(){
        $(".post span a").css("visibility", "visible");
    });
  });
  $.each(function(){
    $(".post").mouseleave(function(){
        $(".post span a").css("visibility", "hidden");
    });
  });
});

edit: Sorry about posting no HTML, here it is

  <div class="post">

                <span>
                    <a href="<?php echo base_url() . '/discussion/edit/' . $post['pid'];?>" class="post-edit" id="<?php echo $post['pid'];?>">edit</a>
                    &nbsp;
                    <a href="<?php echo base_url('discussion/delete/' . $post['pid']); ?>">delete</a>
                </span>
                </div>

Upvotes: 0

Views: 1675

Answers (3)

toomanyredirects
toomanyredirects

Reputation: 2002

Try this instead:

$(function(){
  $('.post').each(function(index, element) {
    $(element).mouseenter(function() {
      $(element).find('span a').show();
    }).mouseleave(function() {
      $(element).find('span a').hide();
    });
  });
});

Upvotes: 0

Blender
Blender

Reputation: 298226

Why don't you just use CSS?

.post span a {
    visibility: hidden;
}

.post:hover span a {
    visibility: visible;
}

Upvotes: 2

David Thomas
David Thomas

Reputation: 253328

I'd suggest:

$('.post').hover(function(){
    $(this).find('a').css('visibility','visible');
},
function(){
    $(this).find('a').css('visibility','hidden');
});

Upvotes: 3

Related Questions