特殊图像滑块答案

【问题标题】：Special image slider特殊图像滑块
【发布时间】：2014-11-10 20:04:29
【问题描述】：

我看到了一个非常酷的滑块，我想重新创建它，但是，我想先用纯 HTML 和 CSS 尝试它。（最初的只是 javascript，但它已经有几年历史了，而且来自一个非常不专业的来源。）这只是一个概念测试，所以没有在跨浏览器等方面付出任何努力。

另外，我不知道怎么称呼它，所以我不知道如何谷歌它。

我们的想法是让我们在一个宽度相等的盒子里放 5 张图片。在悬停其中之一时，非活动的应该缩小，以便完全显示活动的。这是我尝试过的：

#showcase {
	position: relative;
	width: 760px;	/* 750px + 10px to prevent flickering */
	height: 200px;
}

#showcase:hover > .jewelry {
	width: 75px;
}

.jewelry {
	width: 150px;
	height: 100%;
	float: left;
	transition: width 1s;
}

.jewelry:hover {
	width: 450px !important;
}

.jewelryOtherHovered {
	width: 75px;
}

#jewelry1 {
	margin-left: 5px;
	background-color: red;
}

#jewelry2 {
	background-color: yellow;
}

#jewelry3 {
	background-color: green;
}

#jewelry4 {
	background-color: blue;
}

#jewelry5 {
	background-color: pink;
}

<div id="showcase">
	<div id="jewelry1" class="jewelry" onMouseOver="(0)" onmouseout="">	</div>
	<div id="jewelry2" class="jewelry"></div>
	<div id="jewelry3" class="jewelry"></div>
	<div id="jewelry4" class="jewelry">	</div>
    <div id="jewelry5" class="jewelry"></div>
</div>

不用说，它并没有按照我想要的方式工作。尝试将黄色块悬停，当它完成一半时，转到绿色块。这会导致错误的整体宽度。（粉红色的不会一直卡在右侧，希望你明白我的意思。）然后从红色很快悬停到黄色，然后从底部的盒子里出来。在那种情况下，这是显示粉红色的。

问题是，有人知道如何解决它还是有人有更好的方法？感谢您的帮助:-)

【问题讨论】：

标签： html css slider

【解决方案1】：

您避免使用 javascript/jQuery 的原因是什么？

据我了解，您需要以下内容：

when none are active: the width to be each 20%
when one is active:
       -the active: say 60%
       -the others: 10% each
       -total: 100%

http://jsfiddle.net/messedUP90/ahmdo124/

我刚刚编辑了这些值。似乎有几行不需要你可以删掉。

【讨论】：