如何在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>