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容器（定位 {{1 }}）。这样可以确保当悬停时，relative容器的height不会发生变化。

我不明白#dsspan的目的：在
之后

我想这是针对工具提示的 small 箭头 - 请参阅下面的演示：

＆＃13;

ds

＆＃13;

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

＆＃13;

悬停弹出窗口导致主div扩展

2 个答案: