在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 請問如下效果如何實(shí)現(xiàn)好，鼠標(biāo)移動(dòng)到圖片上顯示出完全的文字描述

請問如下效果如何實(shí)現(xiàn)好，鼠標(biāo)移動(dòng)到圖片上顯示出完全的文字描述

圖片描述

如圖上，效果是鼠標(biāo)移到圖片上去，圖片隱藏，對應(yīng)的介紹顯示出來。

<li>
    <div><img src=''/></div>
    <div>文字</div>
</li>
<li>
    <div><img src=''/></div>
    <div>文字</div>
</li>

現(xiàn)在用的方法是將：父元素li設(shè)置為position：relative；2個(gè)子元素設(shè)置絕對定位position：absolute；，鼠標(biāo)移到父元素時(shí)顯示改變子元素z-index，文字部分顯示出來。但是文字部分多的地方會(huì)被后面的li元素?fù)踝。挥懈冈卮笮?，因?yàn)槠渌膌i定位是position：relative。

請問：如何讓鼠標(biāo)移上去時(shí)，文字部分能夠顯示完全不被擋住？

回答
編輯回答
兔寶寶

你的要求是不是這樣的：文字盒子的width是圖片盒子的兩倍，而且要置于其上？
是的話需要更改之前的布局。
就像你說的，將li設(shè)置為relative，那么處于里面的文字盒子會(huì)被后面的元素遮擋。
所以可以將一個(gè)li作為一整排，即直接容納之前三個(gè)li的元素，并設(shè)置為relative。

<ul>
  <li>
    <div>
      <div class="img-box"></div>
      <div class="info-box"></div>
    </div>
    <div>
      <div class="img-box"></div>
      <div class="info-box"></div>
    </div>
    <div>
      <div class="img-box"></div>
      <div class="info-box last"></div>
    </div>
  </li>
</ul>
樣式僅僅羅列出某些重點(diǎn)，實(shí)際使用需要自行修改。
<style>
  li {
    position: relative;
    width: 600px;
    height: 200px;
  }
  li>* {
    display: inline-block;
  }
  li .img-box {
    width: 200px;
    height: 200px;
    background: #eee;
  }
  li .info-box {
    position: absolute;
    top: 0;
    width: 400px;
  }
  li .info-box.last {
    right: 0;
  }
</style>
2017年5月1日 03:09