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();
  })

悬停效果jquery无法正常工作

2 个答案: