想要定位悬停在不同图像上时出现的图像答案

【问题标题】：wanting to position the image that appears when a different image is hovered over想要定位悬停在不同图像上时出现的图像
【发布时间】：2015-09-19 06:14:00
【问题描述】：

所以我想更改带有悬停效果的图像的位置。现在，图像类型只是位于第一个具有悬停效果的图像之下。我正在与这个铁杆作斗争。我试过定位它并浮动它，只是简单的 left:90px 或 right:90px 但悬停时显示的图像并没有让步。这是一个jsfiddle。图像坏了，但你可以得到jist。 https://jsfiddle.net/k0fvbcno/ 任何帮助将不胜感激。

<div id="pain1">
    <img class="pain1" src="images/painspot.png">
    <img class="shoulder" src="images/shoulder.png">
</div>  

<div id="pain2">
    <img class="pain2" src="images/painspot.png">
    <img class="back" src="images/back.png">
</div>

<div id="pain3">
    <img class="pain3" src="images/painspot.png">
    <img class="hip" src="images/hip.png">
</div>


#pain1 {
 position: absolute;
 left: 710px;
 top: 220px;
 margin: auto;
}

.shoulder {
 display: none;
}

.pain1:hover + .shoulder {
 display: inline;   
}

.pain1:hover{
 border: 3px solid transparent;
 display: block;    
}

#pain2 {
 position: absolute;
 left: 627px;
 top: 390px;
 margin: auto;
}

.back {
  display: none;
}

.pain2:hover + .back{
  display: inline;
}

.pain2:hover{
  border: 3px solid transparent;
  display: block;   
}

#pain3 {
 position: absolute;
 left: 680px;
 top: 425px;
}

.hip {
  display: none;    
}

.pain3:hover + .hip{
  display: inline;  
}

.pain3:hover {
  border: 3px solid transparent;
  display: block;   
}

【问题讨论】：

你是想实现一个简单的悬停效果吗？图片可以是cssbackground-images吗？
我工作的悬停效果。我想要做的是调整悬停时出现的图像的位置。让它们成为背景图片会对此有所不同吗？
一个简单的hover效果用background-images就可以很简单的实现。请看看这个。 jsfiddle.net/dLrandfs这是你追求的吗？
不，对不起。我想我的措辞不正确。我有悬停工作，我不需要帮助。我的问题是悬停效果中出现的图像需要更改其位置，而我遇到了麻烦。很抱歉有任何混淆。

标签： css image hover position

【解决方案1】：

我终于明白了。我需要使用绝对位置，这最终使我能够定位使用悬停效果时出现的图像。谢谢！

【讨论】：