图像悬停始终显示在相同位置

I am currently working on a image hover color selector. There are 3 color selectors floating to the right, with smaller squared-size. And when I hover on them, their enlarged image will be shown by their left side and always display on the same position for any small image I hovered on.

我目前正在研究图像悬停颜色选择器。有3个颜色选择器浮动到右侧，平方尺寸较小。当我将它们悬停在它们上面时，它们的左侧会显示放大的图像，并且对于我上传的任何小图像始终显示在相同位置。

I have come up with some code in this link: JsFiddle. But the result is not as expected. I guess no javascript is required for this one but I don't know how to place them all in the same position.

我在这个链接中提出了一些代码：JsFiddle。但结果并不像预期的那样。我想这个不需要javascript，但我不知道如何将它们放在同一个位置。

ul.color_selector li:hover span.color_detail img{
display:inline-block;
float: left;
padding-left:0px;
padding-top:-3px;
top: -105px;
left: -210px;}

Would anyone please provide me some help, thank you so much!

有人请给我一些帮助，非常感谢你！

1 个解决方案

#1

i've made you a simple example with only CSS that achieves what you want. there are some down-sides in using just CSS to do this ( html structure, fixed padding-left etc. ) but it does the job :)

我已经让你成为一个简单的例子，只有CSS可以达到你想要的效果。在使用CSS执行此操作时有一些缺点（html结构，固定填充左侧等），但它确实有效:)

you should be able to adapt my code easily

你应该能够轻松地调整我的代码

Let me know if this helps you

如果这有助于您，请告诉我

See snippet below or jsfiddle

请参阅下面的代码段或jsfiddle

ul.colors {
  padding:0;
  margin:0;
  list-style:none;
  position:relative;
   padding-left:220px;
}
li.color {
  
  display:inline-block;
}
li.color img:first-child {
  width:30px;
  height:30px;
  cursor:pointer;
 
}
li.color img:last-child {
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transition:0.3s;
  width:200px;
  height:200px;
}
li.color img:first-child:hover + img {
  opacity:1;
}

<ul class="colors">
 <li class="color color1">
  <img src="https://css-tricks.com/wp-content/uploads/2015/04/color-burn.png">
  <img src="https://css-tricks.com/wp-content/uploads/2015/04/color-burn.png">
 </li>
 <li class="color color2">
  <img src="https://files.graphiq.com/2307/media/images/t2/Islamic_Green_429772_i0.png">
  <img src="https://files.graphiq.com/2307/media/images/t2/Islamic_Green_429772_i0.png">
 </li>
 <li class="color color3">
  <img src="https://files.graphiq.com/2307/media/images/t2/Deep_Sky_Blue_429606_i0.png">
  <img src="https://files.graphiq.com/2307/media/images/t2/Deep_Sky_Blue_429606_i0.png">
 </li>
 <li class="color color4">
  <img src="https://files.graphiq.com/2307/media/images/Banana_Yellow_429852_i0.png">
  <img src="https://files.graphiq.com/2307/media/images/Banana_Yellow_429852_i0.png">
 </li>
</ul>

#1