CSS3过渡宽度特性
CSS3过渡宽度特性
提问于 2014-04-10 16:20:56
我开发了一个CSS和HTML代码来创建某种手风琴多横幅.我根本不使用javascript。每件事都很好，除了我无法解决的问题：
- 开始点是第一个图像“扩展”。
- 如果你悬停在其他图像上，前者会盘旋在一个飞轮上，而电流也会膨胀。其余的人都有自己的机智
问题:如果你快速地从左到右盘旋到最后一个图像，你会到达一个点，你可以在灰色的背景上(包装背景)，然后所有的焦距仍然崩溃。一个必须是，总是，无论怎样，至少有一个图像展开来显示，例如一个广告，产品选择……
我怎么才能解决这个问题？我没有使用width:auto的原因是它目前没有使用该值集进行任何转换。
http://jsfiddle.net/7NR4Y/代码
<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>回答 1
Stack Overflow用户
回答已采纳
发布于 2014-04-12 19:17:43
我已将以下内容添加到您的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;
}小提琴2
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22993593
复制相关文章
相似问题
腾讯云开发者
