.hover（）工作，但不適用於每個單獨的項目

Question

我正在嘗試使鼠標懸停時出現按鈕，並在鼠標離開對象時消失。有很多帖子，就像你可能在Twitter上看到的那樣，但我只想讓按鈕出現在你徘徊的帖子上，而不是全部。這裏是我的代碼：

$(".posts").hover(function() { 
    $(this).find("article .report-post").css('visibility', 'visible'); 
    $(this).find("article .report-post .report-btn").css('visibility', 'visible'); 
}, function() { 
    $(this).find("article .report-post").css('visibility', 'hidden'); 
    $(this).find("article .report-post .report-btn").css('visibility', 'hidden'); 
}); 

我在做什麼錯？如果我這樣做，什麼都不會發生：

$("article").hover(function() { 
    $(this).find(".report-post").css('visibility', 'visible'); 
    $(this).find(".report-post .report-btn").css('visibility', 'visible'); 
}, function() { 
    $(this).find(".report-post").css('visibility', 'hidden'); 
    $(this).find(".report-post .report-btn").css('visibility', 'hidden'); 
}); 

那是也許是因爲有很多<article> S於網頁？

編輯：這裏是<article> S的一個的HTML：

<article class="single-post"> 
    <div class="profile-pic"> 
     <a href="tg"> 
     <div style="background-image:url(example.jpg);background-size:cover;width:70px;height:70px;"></div></a> 
    </div><!-- profile-pic --> 

    <div class="text"> 
     <h5 class="tg" id="CMfQ34erT6-author"><a href="tg" style="color:#2C3E50;">Tristram Gale</a></h5><a class="report-post" href="#" id="CMfQ34erT6" style="visibility: hidden;"> 
     <div class="report-btn" style="visibility: hidden;"></div></a> 

     <p class="post-text">LALALALALALALALALALALA</p> 

     <div class="details"> 
      <ul> 
       <li style="text-overflow: ellipsis;width: 170px;white-space: nowrap;overflow: hidden;"> 
        <a href="school.php?id=1">Devonport High School for Boys</a> 
       </li> 

       <li style="list-style: none; display: inline"> 
        <a href="post.php?id=CMfQ34erT6"> 
        <ul> 
         <li title="2013-07-02 21:16:57">about 15 hours ago</li> 
        </ul> 

        <ul class="comments" id="CMfQ34erT6"> 
         <li> 
          <a href="javascript:void(0)">0 comments</a> 
         </li> 
        </ul></a> 
       </li> 
      </ul> 
     </div> 

     <div class="comments-box" id="CMfQ34erT6-box" style="display: none;"> 
      <div id="CMfQ34erT6-comment-box"> 
       <ul> 
        <li class="CMfQ34erT6-new-comment"> 
         <form class="CMfQ34erT6-form" id="CMfQ34erT6" name="CMfQ34erT6"> 
          <input autocomplete="off" id="newCommentText" placeholder="Write a comment..." type="text"><input id="addcomment" onclick="return postComment(this.form.id, this.form.newCommentText.value)" type="button" value="Post"> 
         </form> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div><!-- text --> 

    <div class="clear"></div><!-- clear --> 
</article> 

感謝

Answer 1

如果您不打算在Javascript中使用hover()函數來完成其他功能，那麼您可以在CSS中完全執行它。

取下按鈕和鏈接style="visibility: hidden;"屬性和添加到您的CSS：

article .report-post { 
    visibility: hidden; 
} 
article:hover .report-post { 
    visibility: visible; 
} 

按鈕只會只要可見的光標在文章。

的jsfiddle再次在線：http://jsfiddle.net/GeraldS/6MQv7/

Answer 2

使用本： -

jQuery('.button').hover(function() { 
     jQuery(this).addClass('button-hover'); 
    }, function() { 
     jQuery(this).removeClass('button-hover'); 
    }); 

而是按鈕替換品。

Answer 3

好吧，我測試過此上的jsfiddle但他們的服務器現在是下跌 - 看http://www.isitdownrightnow.com/jsfiddle.net.html 在HTML改變從visibility:hidden的風格屬性，display:none爲div和a爲好。

然後將下面的代碼工作：

$(".posts .single-post").hover(function() { 
    $(this).find(".report-post").show(); 
    $(this).find(".report-btn").show(); 
}, function() { 
    $(this).find(".report-post").hide(); 
    $(this).find(".report-btn").hide(); 
}); 

Answer 4

試試這些東西：

1. 確保你已經把懸停（）函數中的document.ready（）
2. 有課堂內沒有文字.report-btn。確保你可以看到按鈕，當一切都設置爲可見。
3. 沒有必要的.find的，使簡單...

用於例如，試試這個代碼：

$(function() { 
$('article').hover(function() { 
    $(".report-post").css('visibility', 'visible'); 
    $(".report-post .report-btn").css('visibility', 'visible'); 
}, function() { 
    $(".report-post").css('visibility', 'hidden'); 
    $(".report-post .report-btn").css('visibility', 'hidden'); 
}); 
}); 

如果還是不行，請嘗試「顯示器：none「和」display：block「而不是」visibility「