溢出：滚动停止悬停状态激活

Posted 2023-03-06

【中文标题】溢出：滚动停止悬停状态激活

【英文标题】：overflow:scroll stops hover states from activating

【发布时间】：2016-06-28 00:54:19

【问题描述】：

链接到codepen

我正在尝试这样做，以便为这个非常长的列表设置一个最大高度（或高度），并让其余的滚动。我可以通过

轻松实现这一目标

高度：800px； 溢出：滚动；

我遇到的问题是当我应用溢出时“#subcategory”项目在悬停时停止显示：滚动

非常感谢任何想法！

基本 HTML 结构

  <!-- Start Auto Transport -->
  <li id="topCategory"><a href="#">Auto Transport</a>
  <ul id="subContainer">
        <li id="subCategory"><a href="#">Auto Insurance</a></li>
        <li id="subCategory"><a href="#">Auto Payment</a></li>
        <li id="subCategory"><a href="#">Gas</a></li>
        <li id="subCategory"><a href="#">Parking</a></li>
        <li id="subCategory"><a href="#">Public Transportation</a></li>
        <li id="subCategory"><a href="#">Service Parts</a></li>
          <!-- add new becomes text field, user enters text then it becomes added as category -->
          <li class="hideNewCategory">
            <a class="mmNewCat" data-number="1" href="#"><i class="icon ion-plus-circled"></i>Add New Category</a>
            <input id="mmCat1" class="mmCatInpt" type="text" placeholder="Enter New Category" maxlength="25"></input>
          </li>
  </ul>
  </li>
  <!-- End Auto Transport -->


  <!-- Start Bills Utilities -->
  <li id="topCategory"><a href="#">Bills & Utilities</a>
    <ul id="subContainer">
        <li id="subCategory"><a href="#">Domain Names</a></li>
        <li id="subCategory"><a href="#">Fraud Protection</a></li>
        <li id="subCategory"><a href="#">Home Phone</a></li>
        <li id="subCategory"><a href="#">Hosting</a></li>
        <li id="subCategory"><a href="#">Mobile Phone</a></li>
        <li id="subCategory"><a href="#">Television</a></li>
        <li id="subCategory"><a href="#">Utilities</a></li>
        <!-- add new becomes text field, user enters text then it becomes added as category -->
          <li class="hideNewCategory">
            <a class="mmNewCat" data-number="2" href="#"><i class="icon ion-plus-circled"></i>Add New Category</a>
            <input id="mmCat2" class="mmCatInpt" type="text" placeholder="Enter New Category" maxlength="25"></input>
          </li>
    </ul>
  </li>
  <!-- End Bills Utilities -->

相关 CSS

ul li:hover #topContainer
  display: block;


ul li a 
  display: block;
  color: $blue;
  text-decoration: none;
  font-family: verdana;
  font-size: 14px;


#topContainer
  list-style: none;
  color: $blue;
  width: 260px;
  height: auto;
  background: $white;
  opacity: 0.9;
  position: absolute;
  z-index: 1000;
  height:800px;
  overflow:scroll;


#topCategory 
  float: none;
  width: auto;
  height: 20px;
    text-align: left;
  margin-left: 15px;


#topCategory a:hover 
  color: $white;
  background-color: $blue;


#topCategory:hover #subContainer 
  display: block;


#topCategory a 
  font-size: 16px;
  position: relative;
  bottom: 41px;
  margin-top: 46px;
  margin-left: -15px;
  padding: 20px 0 20px 20px;
  border-bottom:1px solid $grey-10;


#topCategory a:hover 
  color: $white;


#subContainer 
  list-style: none;
  color: $blue;
  display: none;
  font-size: 12px;
  min-width: 230px;
  width: 150px;
  height: auto;
  background: $white;
  opacity: 0.9;
  margin: -107px 0 0 245px;  position: absolute;
  z-index: 1000;
  white-space:nowrap;


#subContainer a
  border-bottom:1px solid $grey-10;
  margin-top: 41px;


#subCategory 
  float: none;
  width: auto;
  height: 20px;
  text-align: left;
  margin-left: 10px;


#subCategory:hover 
  background: none;


.active 
  background: $white;


#subCategory 
    float: none;
    // hover length
    width:215px;
    // hover length
    text-align: left;
    height: 25px;
    margin-left: 15px;
    margin-right: -43px;

【问题讨论】：

更新：rofl 悬停列表项在那里。您只需向右滚动即可看到它们：/ 完全忘记了溢出-x 和溢出-y，但是，我已经添加了溢出-y：滚动；溢出-x：可见！重要；它的行为仍然与溢出相同：滚动

【参考方案1】：

子类别应该是 Class 名称而不是 Id 元素，更改它，事情会看起来更干净。

.subcategory 



<div class="subcategory"></div>

【讨论】：

感谢您的回复。我改变了它，虽然在语义上我同意它不应该有重复的 ID，但问题和行为仍然保持不变。还有其他想法吗？ Codepen 已更新 codepen.io/mkov88/pen/249908ec99bd8e7a787733ce5235b22a

抱歉没有早点回复。看来您已经解决了您的问题，谢谢分享。

我没有解决问题，只是添加了相关信息。

通过 skype @systemconnection 或发送电子邮件至 [e-mail] 联系我