1

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

4 に答える 4

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();
    });
})
于 2013-10-28T20:26:34.033 に答える
3

これを使って

$(function() {
   $("li.image").hover(function() {
    $(this).find("span").show();
    },function(){
    $(this).find("span").hide();
  });
 });
于 2013-10-28T20:25:43.173 に答える
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>
于 2013-10-28T20:34:48.533 に答える
0

スペルdocumentが間違っていて、コールバックを渡していませんでした$(function () { ... })が、 のエイリアスであるため、実際には必要ありません$(document).ready(function () { ... })。

次のことを試してください。

$(function() {
   $("li.image").hover(function() {
    $(this).parent().next("span").show();
    },function(){
    $(this).parent().next("span").hide();
  });
 });
于 2013-10-28T20:26:36.390 に答える