change visibility for each div on mouseenter/mouseleave jquery

Question

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>

Maybe you want `$("span a", $(this)).css("visibility", "visible");`. — The Alpha, Feb 19 '13 at 23:09
@Sheikh: the docs state that `$('selector',context)` is translated internally to `$(context).find('selector')` so why use the context method? It *adds* an unnecessary level of complexity. Reference: "[Internally, selector context is implemented with the .find() method, so $( "span", this ) is equivalent to $( this ).find( "span" )](http://api.jquery.com/jQuery/#jQuery1)." — David Thomas, Feb 19 '13 at 23:10
As David Thomas shows in his answer, you don't need `$.each` in this case. jQuery will apply the handler to each item that matches the selector. — Jeff B, Feb 19 '13 at 23:12

score 3 · Accepted Answer · answered Feb 19 '13 at 23:09

3

I'd suggest:

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

answered Feb 19 '13 at 23:09

David Thomas

249,100
51
377
410

This works! Should I just use the CSS method that @Blender mentions? – Hikaru Kagi Feb 19 '13 at 23:15
1

CSS requires no additional downloads, so probably it'd be easiest. Do be aware that users on touchscreen devices don't have `:hover` (or `.hover()`) options, though. So try and work out an alternative for those users. And anyway, I should've had the sense to post a CSS-only solution =) – David Thomas Feb 19 '13 at 23:17
Alright thanks! I'm still pretty new to the developing community. (less then 1 year experience) – Hikaru Kagi Feb 19 '13 at 23:19
'S no bother at all (I'm genuinely glad to have helped!), for what it's worth I'm just a hobbyist, and have almost precisely *no* experience in anything professional. The more you explore, the easier it gets. =) – David Thomas Feb 19 '13 at 23:21

score 2 · Answer 2 · answered Feb 19 '13 at 23:09

2

Why don't you just use CSS?

.post span a {
    visibility: hidden;
}

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

answered Feb 19 '13 at 23:09

Blender

289,723
53
439
496

I was trying to do that at first, but couldn't find a way to do it, thanks – Hikaru Kagi Feb 19 '13 at 23:14
Careful, `:hover` on non-link elements in IE is inefficient and should be avoided - see [here](http://stackoverflow.com/questions/4204527/css-does-every-class-support-hover-state) – toomanyredirects Feb 19 '13 at 23:23
1

@toomanyredirects: From what I remember, that only applies to IE6. I haven't had any problems with it (yet). – Blender Feb 19 '13 at 23:24

score 0 · Answer 3 · answered Feb 19 '13 at 23:12

0

Try this instead:

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

answered Feb 19 '13 at 23:12

toomanyredirects

1,972
15
23

change visibility for each div on mouseenter/mouseleave jquery

3 Answers3