悬停弹出窗口导致主 div 展开答案

【问题标题】：Hover popup causes main div to expand悬停弹出窗口导致主 div 展开
【发布时间】：2018-02-18 22:20:28
【问题描述】：

我试图在将鼠标悬停在 div 上时出现一个弹出窗口。我认为它工作正常，除了调用弹出窗口的 div 会扩大到弹出窗口的大小。这是我的jsfiddle。

我在主 div 周围放置了一个边框。当您将鼠标悬停在文本上时，您将看到该 div 是如何展开的。有没有办法不影响它的高度？另外，我从here 改编了这段代码。

我不明白#dsspan:after 的目的。如果我完全删除它，似乎什么都没有改变。也许我没有正确设置它并导致这个问题？

这是我的代码：

    <style>
    #dsspan{
     background: none repeat scroll 0 0 #F8F8F8;
     border: 5px solid #DFDFDF;
     color: #717171;
     font-size: 13px;
     height: auto;
     width:auto;
     letter-spacing: 1px;
     line-height: 30px;
     margin: 0 auto;
     position: relative;
     text-align: center;
     text-transform: uppercase;
     top: -80px;
     left:-30px;
     display:none;
     padding:0 20px;
    }
    #dsspan:after{
     content:'';
     position:absolute;
     bottom:-10px;
     height:0px;
    }      
    .ds:hover #dsspan { display:block; }
    </style>

    <div class="ds">
      <span id="dsspan">
       This line is longer than the rest.
       <ul>
        <li>Text</li>
        <li>Text</li>
        <li>Text</li>
        <li>Text</li>
        <li>Text</li>
       </ul>  
      </span>
      <a href="example.com">Hover Here</a>
    </div>

【问题讨论】：

标签： html css popup hover pseudo-element

【解决方案1】：

将#dsspan 位置从relative 更改为absolute。将整个块放在相对位置容器中。

::after 创建一个伪元素，它是所选元素的最后一个子元素。它在这里没有用。看看这个link。

.container {
      margin-top:50px;
      position:relative
    }
    
    #dsspan{
     background: none repeat scroll 0 0 #F8F8F8;
     border: 5px solid #DFDFDF;
     color: #717171;
     font-size: 13px;
     height: auto;
     width:auto;
     letter-spacing: 1px;
     line-height: 30px;
     margin: 0 auto;
     position: absolute;
     text-align: center;
     text-transform: uppercase;
     top: 0px;
     left:0px;
     display:none;
     padding:0 20px;
    }
  
    .ds:hover #dsspan { display:block; }

<div class="container">
   <div class="ds">
      <span id="dsspan">
       This line is longer than the rest.
       <ul>
        <li>Text</li>
        <li>Text</li>
        <li>Text</li>
        <li>Text</li>
        <li>Text</li>
       </ul>  
      </span>
      <a href="example.com">Hover Here</a>
    </div> 
    </div>

【讨论】：

【解决方案2】：

您可以定位您的dspan 容器绝对相对于ds 容器（定位 relative）。这确保了ds 容器`的height 在您悬停时不会改变。

我不明白#dsspan:after 的目的

我猜这是为工具提示的 small 箭头设计的 - 请参阅下面的演示：

#dsspan {
  background: none repeat scroll 0 0 #F8F8F8;
  border: 5px solid #DFDFDF;
  color: #717171;
  font-size: 13px;
  height: auto;
  width: auto;
  letter-spacing: 1px;
  line-height: 30px;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 30px;
  left: 30px;
  display: none;
  padding: 0 20px;
}

#dsspan:before {
  content: '';
  position: absolute;
  top: -10px;
  height: 10px;
  width: 10px;
  border-top: 5px solid #dfdfdf;
  border-left: 5px solid #dfdfdf;
  background: #f8f8f8;
  left: 50%;
  margin-left: -10px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.ds {
  border: 1px solid red;
  position: relative;
}

.ds:hover #dsspan {
  display: block;
}

<div class="ds">
  <span id="dsspan">
   This line is longer than the rest.
   <ul>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
   </ul>  
  </span>
  <a href="example.com">Hover Here</a>
</div>

【讨论】：