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

我整理了你的HTML并用CSS创建了一个悬停示例

这是一个JSFiddle，它将向您展示：http://jsfiddle.net/QXS3r/

<ul id="carousel">
    <li class="carousel-img red"> 
        <span class="edge"></span>
    </li>
    <li class="carousel-img blue"></li>
    <li class="carousel-img green"></li>
    <li class="carousel-img orange"></li>
    <li class="carousel-img yellow"></li>
</ul>

CSS：

#carousel {
    color: #ffffff;
    list-style: none outside none;
    overflow: hidden;
    width: 50px;
    height: 50px;
    overflow:hidden;
}

#carousel.hover {
    width: 960px;
    height: 50px;
    overflow: visible;
}

#carousel li {
    margin-right: 2px;
    float: left;
    height: 50px;
    width: 50px;
}
.edge {
    float: right;
    height: 50px;
    width: 10px;
    background-color:green;
}

编辑：

提供有效的HTML并重新编写JS小提琴以合并边缘： http://jsfiddle.net/QXS3r/1/

Answer 2

演示：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;
}

Answer 3

我不明白你希望这个是怎样的，但我设置了一个小提琴来展示当你靠近边界时如何显示溢出的内容：

http://jsfiddle.net/5wMPu/

关键是：

.hoverer:hover+.content {
    overflow: visible;
}

.content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

Answer 4

为什么不呢？：

<html>
<head>
<style type="text/css">
    #carousel {
        color: #000000;
        list-style: none outside none;
        margin: 0 auto;
        max-width: 980px;
    }

    #carousel li {
        height: 223px;
        width: 265px;
        background: red;
        opacity: 0;
        float: left;
    }

    #carousel li:hover {
        opacity: 1;
    }
</style>
</head>
<body>


<ul id="carousel">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</li>

</body>
</html>

水平对齐div与隐藏溢出

4 个答案: