css - 如何在 div 悬停时显示更多文本？

Question

我正在开发一个网站，以便在悬停时显示更多文本。这是一个实时片段:

#democontent {
  border: 1px solid #E0E0E0;
  border-radius: 12px;
  padding: 3%;
  width: 80%;
  height: 150px;
}
#imagecontent {
  background-color: #E3E3E3;
  border-radius: 12px;
  float: left;
  margin: 0;
  padding: 1.7% 2%;
  width: 400px;
  height: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#imagecontent:hover {
  overflow: visible;
  white-space: normal;
  width: 400px;
  position: absolute;
  height: auto;
}
#contentimage {
  float: left;
  margin: 0 1% 0 0;
  width: 19%;
}

<div id="democontent">
  <div id="contentimage">
    <img src="" />
  </div>

  <div id="imagecontent">
    <ul class="bullet">
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</li>
      <li>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue</li>
      <li>mper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per</li>
      <li>er inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</li>
      <li>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue</li>
      <li>mper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per</li>
      <li>er inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor.</li>


    </ul>
  </div>

</div>

我有一张图片，我想左右调整 div 的方向。如果我将鼠标悬停在包含内容的 div 上，它就会与图像重叠。知道如何在 div 不与图像重叠的情况下做到这一点吗？

Answer 1

试试这个

  <style type="text/css">
    #democontent {
        border: 1px solid #E0E0E0;
        border-radius: 12px;
        padding: 3%;
        width: 80%;
        height:150px;
        overflow:hidden;
    }
    #imagecontent {
        background-color: #E3E3E3;
        border-radius: 12px;
        float: left;
        margin: 0;
        padding: 1.7% 2%;
        width: 400px;
        height:150px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

    }

    #imagecontent:hover{
        width: 400px;
        height:auto;
    }
    #contentimage {
        float: left;
        margin: 0 1% 0 0;
        width: 19%;
    }
    </style>