0

次のコードを使用してホバー効果を実行しようとしています。しかし、うまくいきません助けてください

脚本

$('.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;
}
4

2 に答える 2

0

表示する要素は、ホバーされている要素の兄弟です.sha。を使用siblingsしてその要素を選択できます（代わりに使用できることshowに注意してください）。hidecss

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

そこから、コードを1つのコールバックのみに減らすことができます。これは以下を使用しますtoggle。

$('.sha').hover(function () {
    $(this).siblings(".list_view_share_button_pop_up_cont").toggle();
});​
于 2012-07-07T11:58:22.003 に答える
0

.first（）とnextAllを使用して、必要なものを取得します

$('.sha').hover(
  function () {
    $(this).nextAll("div").first().show();
  }, 
  function () {
    $(this).nextAll("div").first().hide();
  })
于 2012-07-07T12:05:11.503 に答える