Question

我开发了一个CSS和HTML代码来创建某种手风琴多横幅。我根本不使用javascript。每件事情都很好，除了我的问题，我无法解决：

起点是第一张“展开”的图片
如果你将鼠标悬停在其他图像上，前者会徘徊一次，并且电流也会扩大。 Remainig可以容纳他们的智慧

问题：如果你从左到右快速地悬停到最后一个图像，你会到达一个灰色的背景（包装背景），然后所有的颜色都会被折叠。必须是这样，总是，无论如何，至少有一个图像被展开以显示让我们说一个广告，产品可供选择......

我该如何解决？我没有使用width：auto的原因是它当前没有使用该值设置进行任何转换。

<style type="text/css">
#wrapper div.sector {
    width:50px;
    height:250px;
    background-position:top center;
    background-repeat:no-repeat;
    float:left;
    max-width:300px;
    opacity:0.5;
    overflow:hidden;    

  -webkit-transition:all 1s ease-out;  /* Chrome y Safari */
  -o-transition:all 1s ease-out;  /* Opera */
  -moz-transition:all 1s ease-out;  /* Mozilla Firefox */
  -ms-transition:all 1s ease-out;   /* Internet Explorer */
  transition:all 1s ease-out;  /* W3C */

}

#wrapper #first{
    width:300px;
    max-width:300px;
    min-width:50px;
    opacity:1;  
}
#wrapper:hover div.sector{
    width:50px;
    max-width:100%;
    opacity:0.5;    
}
#wrapper:hover #first{
    width:50px;
    max-width:100%; 
}

#wrapper div.sector:hover{
    width:300px !important;
    opacity:1;
}
</style>
<body>
<div id="wrapper" style="width:500px; height:250px; background-color:#CCC; overflow:hidden; position:relative;">

<a href="http://www.xxxx.es/xxx.do"><div id="first" class="sector" title="Imagen 1"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTpTF_3Pjjnsum_miN1hicvsPb-44qUm4Qban2_MfzEHevwK0_" /></div></a>
<a href="http://www.xxxx.es/xxx.do"><div class="sector" title="Imagen 2"><img src="http://1.bp.blogspot.com/-dazqpbQnahc/UaxhFz6mwgI/AAAAAAAAGJQ/pVhtFcqEBiY/s640/Ideal-landscape.jpg" /></div></a>
<a href="http://www.xxxx.es/xxx.do"><div class="sector" title="Imagen 3"><img src="http://2.bp.blogspot.com/-XegWV6RbUmg/UKIA7m7XgDI/AAAAAAAAAtA/6yQKXMkTjmA/s640/village-vector-the-dock-pixels-tagged-beach-landscape-512305.jpg" /></div></a>
<a href="http://www.xxxx.es/xxx.do"><div class="sector" title="Imagen 4"><img src="http://i.telegraph.co.uk/multimedia/archive/01842/landscape-rainbow_1842437i.jpg" /></div></a>
<a href="http://www.xxxx.es/xxx.do"><div class="sector" title="Imagen 5"><img src="http://c.dryicons.com/files/graphics_previews/sunset_landscape.jpg" /></div></a>

</div>

Answer 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之后创建一个伪元素。

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

我把它变成绿色，这样你就可以了解正在发生的事情，当然在制作过程中让它变得透明。

fiddle

忽略之前的所有答案！

你需要的只是

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

fiddle 2

CSS3过渡宽度属性

1 个答案: