Question

我正在尝试使用多个ul / li进行“精美”导航。我认为我的问题出在带有子选择器（>）的CSS中。如果运行代码片段，当您将鼠标悬停在li.first（项目1）上时，您会注意到，尽管li：first> ul> li的css带有溢出：隐藏；您仍然可以清楚地看到div.hover容器。连同此div.hover容器一起位于li.one（示例一）之内，所以当我将鼠标悬停在li。> one（其他示例）上时为什么显示它。

我只是感到困惑，在盯着并测试一个小时的解决方案后，我希望在此方面有所投入。

编辑：对于片段中的内容看起来很乱，我深表歉意。

/* ================== Example ================ */

.example>ul {
  display: flex;
  position: relative;
  height: 50px;
  width: 800px;
  margin: 50px auto;
  list-style-type: none;
  background-color: #5A827E;
}

.example>ul>li {
  display: block;
  height: 100%;
  width: 33.3%;
  border-right: 2px solid rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  font-style: italic;
}

.example>ul>li:hover {
  overflow: visible;
  background-color: #415E5B;
}

.first>ul {
  display: block;
  position: absolute;
  top: 50px;
  height: 400px;
  width: 100.5%;
  list-style-type: none;
  background-color: #415E5B;
}

.first>ul>li {
  display: block;
  color: white;
  line-height: 40px;
  text-align: center;
  height: 10%;
  width: 100%;
  border-top: 1px dotted rgba(255, 255, 255, 0.5);
  font-weight: 400;
  font-style: normal;
  overflow: hidden;
}

.first>ul>li:hover {
  background-color: white;
  color: blue;
}

.hover-container {
  display: flex;
  justify-content: flex-start;
  flex-flow: column wrap;
  position: absolute;
  left: 265px;
  top: 0;
  height: 400px;
  width: 535px;
  border: 3px solid gold;
}

.list-container {
  display: block;
  height: auto;
  width: 30%;
  border: 3px solid #F2D7E2;
}

.list-container h2 {
  text-align: left;
  color: darkgray;
  font-weight: bold;
}

.list-container ul {
  list-style-type: none;
  text-align: left;
}


/* ------------------ Example END ---------------- */

<div class="example">
  <ul>
    <!-- first navigation container -->
    <li class="first"> Item One
      <ul>
        <!-- dropdown -->
        <li class="one"> Example 1
          <!-- dropdown item -->
          <div class="hover-container">
            <!-- sidebar -->
            <div class="list-container">
              <!-- sidebar content  box-->
              <h2>Content Header One</h2>
              <ul>
                <li>Content One</li>
                <li>Content Two</li>
                <li>Content Three</li>
              </ul>
            </div>
            <!-- sidebar content box END -->
            <div class="list-container">
              <!-- sidebar content  box-->
              <h2>Content Header One</h2>
              <ul>
                <li>Content One</li>
                <li>Content Two</li>
                <li>Content Three</li>
              </ul>
            </div>
            <!-- sidebar content box END -->
          </div>
          <!-- sidebar END-->
        </li>
        <!-- dropdown item END -->
        <li>Example 2</li>
        <li>Example 3</li>
        <li>Example 4</li>
        <li>Example 5</li>
        <li>Example 6</li>
        <li>Example 7</li>
        <li>Example 8</li>
        <li>Example 9</li>
        <li>Example 10</li>
      </ul>
      <!-- END of dropdown -->
    </li>
    <!-- main list item END -->
    <li class="second">Item Two</li>
    <li class="third">Item Three</li>
  </ul>
</div>

Answer 1

如果希望仅在第一个hover-container悬停时显示li(Example 1) div，则需要用以下CSS替换添加的.hover-container：

.first>ul>li:first-child:hover .hover-container{
  display: flex;
  justify-content: flex-start;
  flex-flow: column wrap;
  position: absolute;
  left: 265px;
  top: 0;
  height: 400px;
  width: 535px;
  border: 3px solid gold;
}

Answer 2

您的子选择器似乎还可以。我认为问题在于您的定位。 .hover-container元素具有“ position：absolute”，这意味着它相对于其第一个定位祖先放置（请参见https://www.w3schools.com/css/css_positioning.asp）。您想确定它是否溢出上面的.first> ul> li元素，因此那个元素需要一个“位置：相对”。

添加这些规则应该可以使您找到想要的行为：

.first>ul>li {
    position: relative;
    ...
}

.first>ul>li:hover {
    overflow: visible;
    ...
}

Answer 3

在.hover-container上定义的以下CSS属性规则将其位置相对于.example>ul>li定位为绝对位置，.hover-container { /*...*/ position: absolute; /*...*/ }是包含块的最接近祖先（{{3} }。

li

此问题的解决方法是通过将.hover-container的位置设置为相对，来与.first>ul>li { /*...*/ position: relative; /*...*/ }最接近祖先的.hover-container形成一个包含的块。

.first>ul {
  /*...*/
  overflow: hidden;
  /*...*/
}

对此的另一种解决方法是将最接近的包含的块（其祖先是this._hubConnection = new signalR.HubConnectionBuilder().withUrl("http://localhost:49972/notify").build(); this._hubConnection .start() .then(() => console.log('Connection started!')) .catch(err => console.log('Error while establishing connection :('));）的overflow属性设置为hidden。

Information: WebSocket connected to ws://localhost:49972/notify?id=8hEjOLP3-5Z4oXgCLJjDww

Connection started!

为子孙而不是孙子孙女？

3 个答案: