I'm trying to show a span when an li with the class of .image is hovered, then preferably hide it once the mouse is removed from the li. I'm using the code below but to no avail.

The HTML

<ul>
    <li class="image">
    <span class="post_meta">Test &nbsp; 40in x 9in</span>
    <img src="">
    </li>
</ul>

THE CSS

span.post_meta {
    background: none repeat scroll 0 0 #000000;
    bottom: 7px;
    color: #FFFFFF;
    display: block;
    padding: 0 2px;
    position: absolute;
    right: 86px;
}

The jQuery

$docuemnt.ready() {
$(function() {
   $("li.image").hover(function() {
    $(this).parent().next("span").show();
    },function(){
    $(this).parent().next("span").hide();
  });
 });  
}); 

I'm trying to show a span when an li with the class of .image is hovered, then preferably hide it once the mouse is removed from the li. I'm using the code below but to no avail.

The HTML

<ul>
    <li class="image">
    <span class="post_meta">Test &nbsp; 40in x 9in</span>
    <img src="http://web.">
    </li>
</ul>

THE CSS

span.post_meta {
    background: none repeat scroll 0 0 #000000;
    bottom: 7px;
    color: #FFFFFF;
    display: block;
    padding: 0 2px;
    position: absolute;
    right: 86px;
}

The jQuery

$docuemnt.ready() {
$(function() {
   $("li.image").hover(function() {
    $(this).parent().next("span").show();
    },function(){
    $(this).parent().next("span").hide();
  });
 });  
}); 

• javascript
• jquery

Share Improve this question Follow edited Oct 28, 2013 at 20:24 Nikki Mather asked Oct 28, 2013 at 20:19 Nikki MatherNikki Mather 1,14833 gold badges1717 silver badges3333 bronze badges 6

• Are you using !important anywhere in your css for .post_meta? – Andrew Commented Oct 28, 2013 at 20:23
• No - updating to show CSS – Nikki Mather Commented Oct 28, 2013 at 20:24
• why are you using dom ready twice? – j0hnstew Commented Oct 28, 2013 at 20:25
• You also spelled document incorrectly here. – Andrew Commented Oct 28, 2013 at 20:26
• Whoops. Thanks for the heads up. – Nikki Mather Commented Oct 28, 2013 at 20:30

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 4

You can do this only with CSS

.post_meta {
  display:none;
}

li.image:hover .post_meta{
  display:block;
}

Edit

With Jquery try this: View the Demo http://jsfiddle/9RYhR/7/

$(document).ready(function () {
    $('li.image').mouseenter( function() {
        $(this).children('span').fadeIn();
    });
    $('li.image').mouseleave( function() {
        $(this).children('span').fadeOut();
    });
})

Use this

$(function() {
   $("li.image").hover(function() {
    $(this).find("span").show();
    },function(){
    $(this).find("span").hide();
  });
 });

You spelled document incorrectly and didn't pass a callback, but that's not really needed as $(function () { ... }) is an alias for $(document).ready(function () { ... }).

Try the following:

$(function() {
   $("li.image").hover(function() {
    $(this).parent().next("span").show();
    },function(){
    $(this).parent().next("span").hide();
  });
 });

<style>
  #scope .post_meta{display:none;}
  #scope li:hover{cursor:pointer;}
</style>

<ul id="scope">
    <li class="image">
    <span class="post_meta">Test &nbsp; 40in x 9in</span>
    <img src="http://web.">
    </li>
</ul>

<script>
  $(document).ready(function(){
    $("#scope .image").hover(function() {
        $('.post_meta').show();
      },function(){
        $('.post_meta').hide();
    });
  });
</script>