0

ホバーしているリンクに応じて、非表示のdivブロックを表示しようとしています。メインカテゴリとサブカテゴリがあります。誰かがメインカテゴリにカーソルを合わせたときにのみ、（関連するメインカテゴリの）サブカテゴリを表示したいのですが、次のことを試しましたが、うまくいかないようです。すべての助けに感謝します。

コード

      <style type="text/css">
      <!--
      .series-wrapper
      { display:none;}


      .brandcat li a:hover .series-wrapper 
       { display:block;}
      -->
      </style>    


    <div class="brandcat">
    <h3>Most Popular Brands</h3>
    <ul class="brands">
    <li><a href='showbrand.php?bd_id=1'>Apple</a>
        <div class='series-wrapper'><h5>Select your Apple Series</h5>
            <a href='showseries.php?s_id=1'>Apple Mainseries1</a>
            <a href='showseries.php?s_id=3'>Test2</a>
        </div>
    </li>
    <li><a href='showbrand.php?bd_id=2'>Ball</a>
        <div class='series-wrapper'><h5>Select your Ball Series</h5>
            <a href='showseries.php?s_id=1'>Ball Mainseries1</a>
            <a href='showseries.php?s_id=3'>Ball Test2</a>
        </div>
    </li>

          </ul>
         </div>
4

2 に答える 2

2

あなたの.series-wrapperはアンカーの子孫ではありません。それはアンカー付きです。このように書く

.brandcat li a:hover + .series-wrapper { display:block;}
于 2012-08-28T10:52:01.060 に答える
0

迅速な修正ですが、信頼性はありません：

.brandcat li:hover .series-wrapper {
    display:block;
}

正しい修正：

<style type="text/css">
<!--
.brandcat .series-wrapper {
    display:none;
}

.brandcat li:hover .series-wrapper,
.brandcat li.active .series-wrapper {
    display:block;
}
-->
</style>

体：

<div class="brandcat">
  <h3>Most Popular Brands</h3>
  <ul class="brands">
    <li><a href='showbrand.php?bd_id=1'>Apple</a>
      <div class='series-wrapper'>
        <h5>Select your Apple Series</h5>
        <a href='showseries.php?s_id=1'>Apple Mainseries1</a> <a href='showseries.php?s_id=3'>Test2</a> </div>
    </li>
    <li><a href='showbrand.php?bd_id=2'>Ball</a>
      <div class='series-wrapper'>
        <h5>Select your Ball Series</h5>
        <a href='showseries.php?s_id=1'>Ball Mainseries1</a> <a href='showseries.php?s_id=3'>Ball Test2</a> </div>
    </li>
  </ul>
</div>

<script type="text/javascript">
$('.brands > li').each(function(index, element) {
    $(element).hover(
    function() {
        $(this).addClass('active');
    }, 
    function() {
        $(this).removeClass('active');
    });
});
</script>
于 2012-08-28T11:01:42.653 に答える