Hover popup causes main div to expand

问题

I'm trying to have a popup appear when hovering over a div. It is working properly, I think, except that the div calling the popup expands in size to whatever the popup is. Here is my jsfiddle.

I placed a border around the main div. When you mouse over the text, you will see how that div expands. Is there a way to not have its height affected? Also, I adapted this code from here.

I don't understand the purpose of #dsspan:after. If I remove that completely nothing seems to change. Maybe I don't have it setup up correctly and it is causing this problem?

Here's my code:

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

回答1:

You can position your dspan container absolutely with respect to the ds container (positioned relative). This ensures that the height of the ds container` will not change when you hover over it.

I don't understand the purpose of #dsspan:after

I guess that was intended for the small arrow of the tooltip - see demo below:

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

回答2:

Change #dsspan position from relative to absolute. Place the whole block inside a relative position container.

::after creates a pseudo-element that is the last child of the selected element. It doesn't have use here. Check out this 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>

来源：https://stackoverflow.com/questions/46142749/hover-popup-causes-main-div-to-expand