在悬停时显示/隐藏跨度

时间:2013-10-28 20:19:34

标签: javascript jquery

我试图在li.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();
  });
 });  
}); 

4 个答案:

答案 0 :(得分:4)

您只能使用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();
    });
})

答案 1 :(得分:3)

使用此

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

答案 2 :(得分:0)

你错误地拼写了document并没有通过回调,但这并不是真的需要,因为$(function () { ... })$(document).ready(function () { ... })的别名。

尝试以下方法:

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

答案 3 :(得分:0)

<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>