使懸停停留在從它出現的元素上

我有一個串列，每個串列項都包含一個標題。將滑鼠懸停在標題上時，會出現一個資訊框（如下例所示）。

問題是當游標從標題移動到框時，框消失了。

要求是當游標從標題移動到框時，框應該保持可見。

如何做到這一點？

ul {
margin:0;
padding:0;
list-style: none;
}

ul li   .box {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
}
    
ul li:hover   .box {
  opacity: 1;
  visibility: visible;
  min-height: 200px;
}

.box {
  background-color: #ccc;
  padding: 10px;
  text-align: right;
  border-radius: 6px;
}

<ul class="nav">
  <li class="pt pt1 active" data-cont="r1">
      <p>????? ???? ??????? ???????? ???????</p>
  </li>
  <div class="box">
      <div class="steps">
          <div>
              <p>???? ???? 10,000?.? ???????? ?? ????? ????? ?????? ?????????? ?????? ????????? ?? ????? ?????? ? 60,000 ?.? ?? ??????? ??????? / ??? </p>
          </div>
          <div>
              <p>??? ??????? ????? ????? ???? ???? ?? ??? ??? ?????</p>
          </div>

          <div>
              <p>??? ??????? ?????</p>
          </div>
          <div>
              <p>??? ??????? ????? ?????</p>
          </div>
      </div>
  </div>
</ul>

uj5u.com熱心網友回復：

該解決方案需要更改嵌套結構。

1. 嵌入box在li
2. 保持串列項可見并隱藏嵌入的框
3. 當li在盤旋，使預埋盒visible

ul {
  margin:0;
  padding:0;
  list-style: none;
}

ul li:hover > .box {
opacity: 1;
    visibility: visible;
    min-height: 200px;
}

.box {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  background-color: #ccc;
  padding: 10px;
  text-align: right;
  border-radius: 6px;
}

<ul class="nav">
  <li class="pt pt1 active" data-cont="r1">
      <p>????? ???? ??????? ???????? ???????</p>
      <div class="box">
          <div class="steps">
              <div>
                  <p>???? ???? 10,000?.? ???????? ?? ????? ????? ?????? ?????????? ?????? ????????? ?? ????? ?????? ? 60,000 ?.? ?? ??????? ??????? / ??? </p>
              </div>
              <div>
                  <p>??? ??????? ????? ????? ???? ???? ?? ??? ??? ?????</p>
              </div>

              <div>
                  <p>??? ??????? ?????</p>
              </div>
              <div>
                  <p>??? ??????? ????? ?????</p>
              </div>
          </div>
      </div>
      <li>
</ul>

uj5u.com熱心網友回復：

希望這會解決您的問題。

ul{
margin:0;
padding:0;
list-style: none;
}
ul li .box {
opacity: 0;
    visibility: hidden;
    max-height: 0;
    }
    
ul li:hover .box {
opacity: 1;
    visibility: visible;
    min-height: 200px;
}

.box {
background-color: #ccc;
padding: 10px;
text-align: right;
border-radius: 6px;
}

<ul class="nav">
                            <li class="pt pt1 active" data-cont="r1">
                                <p>????? ???? ??????? ???????? ???????</p>
                                <div class="box">
                                <div class="steps">
                                    <div>
                                        <p>???? ???? 10,000?.? ???????? ?? ????? ????? ?????? ?????????? ?????? ????????? ?? ????? ?????? ? 60,000 ?.? ?? ??????? ??????? / ??? </p>
                                    </div>
                                    <div>
                                        <p>??? ??????? ????? ????? ???? ???? ?? ??? ??? ?????</p>
                                    </div>

                                    <div>
                                        <p>??? ??????? ?????</p>
                                    </div>
                                    <div>
                                        <p>??? ??????? ????? ?????</p>
                                    </div>
                                </div>
                            </div>
                            </li>
                            
                  </ul>

標籤：html css

上一篇：CSSTransformrotateY無法正常作業

下一篇：HTML和CSS如何將我的徽標移動到左側