javascript - 悬停时显示/隐藏跨度

Question

我试图在悬停li类的an 时显示一个跨度.image，然后最好在将鼠标从 li 中移除后隐藏它。我正在使用下面的代码，但无济于事。

的HTML

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

CSS

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

jQuery

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

Answer 1

您只能使用 CSS 执行此操作

.post_meta {
  display:none;
}

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

编辑

使用 Jquery 试试这个：查看演示http://jsfiddle.net/9RYhR/7/

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

Answer 2

用这个

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

Answer 3

您拼写document错误并且没有通过回调，但这并不是真正需要$(function () { ... })的，因为$(document).ready(function () { ... }).

尝试以下操作：

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

Answer 4

<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.com">
    </li>
</ul>

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