懸停效果jQuery不起作用

Question

我試圖使用下面的代碼做懸停效果。 但它不起作用，請幫助我

腳本

$('.sha').hover(
  function () {
    $(this).next().children('div').css('display','block');
  }, 
  function () {
    $(this).next().children('div').css('display','none');
  })

的HTML

<div class="listing_share_cont">
    <a href="#" class="sha">Share</a>
    <img src="images/listing_share_arrow_down.jpg" alt=" ">                 
    <div class="list_view_share_button_pop_up_cont">
        <div class="list_view_share_button_pop_up_cont_arrow">
            <img src="images/home_list_view_share_pop_arrow.png" alt=" " />
        </div>
        <div class="list_view_share_button_pop_up">
            <!-- Some images here -->
        </div>
    </div>
</div>

的CSS

.list_view_share_button_pop_up_cont { 
    float: left; left: 10px; position: absolute; top: 9px; width:285px; display:none;
}
.list_view_share_button_pop_up_cont_arrow {
    float:left; width:265px; margin:0 0 -4px 0;
}
.list_view_share_button_pop_up { 
    float:left; width:265px; background:#0474be; padding:8px 8px 4px 8px;
}

Answer 1

您要顯示的元素是.sha元素的同級元素。 您可以使用siblings來選擇該元素（注意，可以使用show和hide代替css ）：

$('.sha').hover(function () {
    $(this).siblings(".list_view_share_button_pop_up_cont").show();
}, function () {
    $(this).siblings(".list_view_share_button_pop_up_cont").hide();
});

從那里，您可以將代碼減少為僅一個回調，它使用toggle ：

$('.sha').hover(function () {
    $(this).siblings(".list_view_share_button_pop_up_cont").toggle();
});​

Answer 2

使用.first（）和nextAll獲得所需的內容

$('.sha').hover(
  function () {
    $(this).nextAll("div").first().show();
  }, 
  function () {
    $(this).nextAll("div").first().hide();
  })