jquery - 水平对齐 div 并 overflow hidden

Question

我试图将列表项与隐藏的溢出水平对齐，并且仅当鼠标位于 div 的边缘时才显示隐藏的元素。实现这一目标的最佳方法是什么？

HTML

<div id="carousel-inner-container">
   <ul id="carousel">
      <li class="carousel-img"></li>
      <li class="carousel-img"></li>
      <li class="carousel-img"></li>
      <li class="carousel-img"></li>
      <li class="carousel-img"></li>
   </ul> 
</div>

CSS

#carousel-inner-container {
   margin: 0 auto;
   max-width: 980px;
   overflow: hidden;
}

#carousel {
    color: #ffffff;
    list-style: none outside none;
    text-transform: uppercase;
    width: 2000px;
}

#carousel li {
    float: left;
    height: 223px;
    position: relative;
    width: 265px;
 }

Answer 1

演示:http://jsfiddle.net/sL8sX/1/ 已更新

li {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: hotpink;
    color:white;
    text-align: center;
    line-height: 100px;
}
ul { padding: 0; margin: 0; width: 100px; white-space: nowrap; overflow: hidden; }

li:first-of-type {
    background-color: red;
    position: relative;
}
li:first-of-type span {
    height: 100px;
    width: 10px;
    background-color: purple;
    position: absolute;
    right: 0;
}
.expand {
    width: auto;
}