我希望每个div在按钮悬停时显示其内容

时间:2012-02-11 17:31:54

标签: jquery this fadeto

我有divs中的图像和Paragraphs,当你翻看标题我希望段落显示时,这段代码适用于我的其他网站,但由于某种原因不能在这里工作

谁能告诉我我做错了什么

 $(document).ready(function() {

$('.post-band h2').hover(function(){
        $(".entry p",this).fadeTo("fast", 1);
          //$(".entry p",this).slideDown();
        },
    function(){
         $(".entry p",this).fadeTo("fast", 0);
        //  $(".entry p",this).slideUp();
                });

});

<div class="post-band" id="post-67">

 <h2>Dale Rodman</h2>
<div class="band-image">
<img width="300" height="250" src="http://localhost/wp-content/uploads/2012/02/dale1.jpg" class="attachment-post-thumbnail wp-post-image" alt="dale" title="dale" /></div>

 <div class="entry">
   <p>Dale has been passionate about music ever since he stopped being passionate about something else, when he puts his mind to something there is not stopping this machine, playing guitar since he was little his ability to absorb different styles has help to create a style like non other.</p>
<h3>Acoustic Guitar, Vocals</h3>
 </div>
    </div>

2 个答案:

答案 0 :(得分:0)

您的悬停功能中的

$(".entry p",this)会在$('.post-band h2')内找到选择器(h2内)。您可能需要混合使用.closest()然后.find()向下移动。

但是发布你的html以获得更好的答案。

答案 1 :(得分:0)

这是一个可能解决方案的小提琴:http://jsfiddle.net/sDJDr/

我使用的javascript是下面的,也是上面的ori意思。

$(document).ready(function() {

    $('.post-band h2').hover(function(){
        var $p = $(this).closest('div.post-band').find('p');
        $p.fadeTo("fast", 1);
        //$(".entry p",this).slideDown();
    },
    function(){
        var $p = $(this).closest('div.post-band').find('p');
        $p.fadeTo("fast", 0);
        //  $(".entry p",this).slideUp();
    });

});