Html CSS3转换宽度属性

我已经开发了一个CSS和HTML代码来创建某种手风琴多横幅。我根本不使用javascript。 一切正常，除了我无法解决的问题：

起点是第一个图像“展开”

如果将鼠标悬停在其他图像上，则前一个图像悬停在另一个图像上，当前图像也会展开。剩下的人能适应他们的智慧

问题：如果你从左到右快速悬停到最后一幅图像，你会到达一个点，在这个点上你可以覆盖一个灰色的背景（包装背景），所有的图像都会保持不变，然后折叠。 一个必须的是，无论发生什么，总是至少有一个图像被扩展以显示，比如说，一个广告，一个可供选择的产品

我如何解决这个问题？我不使用width:auto的原因是它当前没有使用该值集进行任何转换

代码在

#包装部门{
宽度：50px；
高度：250px；
背景位置：上中；
背景重复：无重复；
浮动：左；
最大宽度：300px；
不透明度：0.5；
溢出：隐藏；
-webkit过渡：所有1都轻松；/*Chrome y Safari*/
-o-transition：所有的1都放松；/*Opera*/
-moz过渡：所有1都放松；/*Mozilla Firefox*/
-ms过渡：所有的1都轻松；/*Internet Explorer*/
转换：所有的1都会释放；/*W3C*/
}
#包装器优先{
宽度：300px；
最大宽度：300px；
最小宽度：50px；
不透明度：1；
}
#包装器：悬停分区扇区{
宽度：50px；
最大宽度：100%；
不透明度：0.5；
}
#包装器：首先悬停{
宽度：50px；
最大宽度：100%；
}
#包装器分区扇区：悬停{
宽度：300px！重要；
不透明度：1；
}

我已将以下内容添加到您的CSS中

a:last-child div.sector {
    position: relative;
    overflow: visible !important;
}

a:last-child div.sector:after {
    content: "";
    position: absolute;
    left: 100%;
    top: 0px;
    height: 100%;
    width: 100px;
    background-color: green;
}

这将在序列的最后一个div之后创建一个伪元素

此伪代码将接收悬停状态并将其传输到元素。这样，即使光标进入有时会暴露的包装器区域，它仍然会将其选中

我有它的绿色，这样你可以看到正在发生的事情，当然在生产过程中，使它透明

忽略前面所有的答案

你所需要的只是

a:last-child div.sector {
    overflow: visible !important;
}

---

@09stephenb:那真的有必要吗？OP已经创建了一个可以看到图像的提琴。您是否考虑过使用绝对定位并转换左侧位置而不是宽度？

a:last-child div.sector {
    overflow: visible !important;
}