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不是anchor的后裔。它带有anchor。像这样写

.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 回答