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

Question

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

我在这个链接中提出了一些代码：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;}

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

Answer 1

我已经让你成为一个简单的例子，只有CSS可以达到你想要的效果。 在使用CSS执行此操作时有一些缺点（html结构，固定padding-left等）但是它可以完成这项工作：）

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

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

请参阅下面的代码段或 jsfiddle

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;