使用 display:block 将鼠标悬停在链接上时无法显示/隐藏 div答案

【问题标题】：Cannot show/hide div when hover on link using display:block使用 display:block 将鼠标悬停在链接上时无法显示/隐藏 div
【发布时间】：2012-08-28 10:49:08
【问题描述】：

我试图根据悬停的链接显示隐藏 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>

【问题讨论】：

标签： jquery css hide layer

【解决方案1】：

你的 .series-wrapper 不是 anchor 的后裔。它是 anchor 。像这样写

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

【讨论】：

太棒了。非常感谢..自从过去几个小时以来我一直在尝试解决，但很生气！
效果很好。如果您能提供帮助，只有一件事，我如何将 div series-wrapper 框放在主类别链接旁边...我已将框样式赋予 div .series wrapper 但它显示在页面的顶部中间部分跨度>
忘记最后一部分..通过定位 div 使其工作。谢谢。
1 但有问题 - 当我尝试转到子类别的 div 时，将鼠标移出主类别时，子类别块再次隐藏起来，无法从该块中选择任何内容:(
这样写 .brandcat li:hover .series-wrapper { display:block;}

【解决方案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>

身体：

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

【讨论】：