2009-09-01 8 views
0

私は、Wordpressが投稿したことと似たものを求めています。私が欲しいのはホバーparticulaに、jQueryセレクタの親と子ですか?

マイHTML

<div class="onhover"> 
    <p class="">This is a paragraph. My background will be yellow when you hover over me — even if you're using Internet Explorer.</p> 
    <div class="actions"><a href="#">Add</a> | <a href="#">Edit</a> | <a href="#">Modify</a> | <a href="#">Delete</a></div> 
</div> 
<div class="onhover"> 
    <p class="">Move your mouse over me! Move your mouse over me! I'll turn yellow, too! Internet Explorer users welcome!</p> 
    <div class="actions"><a href="#">Add</a> | <a href="#">Edit</a> | <a href="#">Modify</a> | <a href="#">Delete</a></div> 
</div> 

CSS

* { margin:0; padding:0; font-family:Verdana, Arial, Helvetica, sans-serif; } 
    div.actions { padding:5px; font-size:11px; visibility: hidden; } 
    #hover-demo1 p:hover { 
     background: #ff0; 
    } 
    .pretty-hover { 
     background: #fee; 
     cursor: pointer; 
    } 

のjQuery

$(document).ready(function() { 
     $('.onhover p').hover(function() { 
     $(this).addClass('pretty-hover'); 
     $('div.actions').css('visibility','visible'); 
     }, function() { 
     $(this).removeClass('pretty-hover'); 
     $('div.actions').css('visibility','hidden'); 
     }); 
    }); 

です他のすべてのアクションが表示されている場合は、そのアクションを表示する必要があります。私はどのように特定のものに限定するのですか?

答えて

2

CSSの可視性属性を設定する必要はありません。 jQueryのメソッドはすでに隠して表示しています。単にトラバーサルメソッドnext()を使用してください。

$(document).ready(function() { 
    $('.onhover p').hover(function() { 
    $(this).addClass('pretty-hover'); 
    $(this).next().show(); 
    }, function() { 
    $(this).removeClass('pretty-hover'); 
    $(this).next().hide(); 
    }); 
}); 
0

最初にすべてのdiv.actionsを隠し、親が推移してたときにのみ表示さである場合があります。

$(document).ready(function() { 
    $('div.actions').hide(); 
    $('.onhover p').hover(function() { 
    $(this).addClass('pretty-hover'); 
    $(this).children('div.actions:first').show(); 
    }, function() { 
    $(this).removeClass('pretty-hover'); 
    $(this).children('div.actions:first').hide(); 
    }); 
}); 
関連する問題