Question

我正在尝试显示隐藏div块，具体取决于它悬停的链接。我有主要的类别和子类别。只有当有人在maincategory上盘旋时，我想显示子类别（相关主类别）。我尝试了以下但似乎没有用。所有帮助都表示赞赏。

代码

      <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>

Answer 1

您的 .series-wrapper 不是锚点的下降。它与锚点有关。像这样写

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

Answer 2

快速修复但不可靠：

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

BODY：

<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>

使用display：block悬停在链接上时无法显示/隐藏div

代码

2 个答案: