请问如下效果如何实现好，鼠标移动到图片上显示出完全的文字描述

Question

如图上，效果是鼠标移到图片上去，图片隐藏，对应的介绍显示出来。

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

现在用的方法是将：父元素li设置为position：relative；2个子元素设置绝对定位position：absolute；，鼠标移到父元素时显示改变子元素z-index，文字部分显示出来。但是文字部分多的地方会被后面的li元素挡住，只有父元素大小，因为其它的li定位是position：relative。

请问：如何让鼠标移上去时，文字部分能够显示完全不被挡住？

Answer 1

你的要求是不是这样的：文字盒子的width是图片盒子的两倍，而且要置于其上？
是的话需要更改之前的布局。
就像你说的，将li设置为relative，那么处于里面的文字盒子会被后面的元素遮挡。
所以可以将一个li作为一整排，即直接容纳之前三个li的元素，并设置为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>
样式仅仅罗列出某些重点，实际使用需要自行修改。
<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>