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

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 等），但它可以完成这项工作:)

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

如果这对你有帮助，请告诉我

请参阅下面的 sn-p 或 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>