悬停弹出窗口导致 main div 展开

Question

我试图在将鼠标悬停在 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>

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

Answer 2

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

I don't understand the purpose of #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>

悬停弹出窗口导致 main div 展开

Hover popup causes main div to expand

html

css

popup

hover

pseudo-element