html - 特殊图像 slider

Question

我看到了一个非常酷的 slider ，我想重新创建它，但是，我想先用纯 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>

不用说，它没有按照我想要的方式工作。尝试将黄色 block 悬停，完成一半后转到绿色 block 。这会导致错误的总宽度。 (粉红色的不会一直卡在右边，希望你明白我的意思。)然后从红色的非常快速地悬停到黄色的，然后从底部的盒子里出来。在那种情况下，这是显示粉红色的。

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

Answer 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/

我刚刚编辑了值。似乎有几行不是必需的，您可以将其删除。