Javascript 根据我悬停的按钮移动相同的图像

我在页面上有8个按钮（图像），都在同一行。还有一个隐藏图像（红色矩形框），上面没有文本。我想在我悬停的按钮（图像）下方显示相同的红色框，图像上有动态文本（根据按钮的链接）

HTML代码：

 <div id="imageRings">
    <img id="ringOne" class="rotate" src="images/ring1.png">
    <img id="ringTwo" class="rotate" src="images/ring2.png">
    <img id="ringThree" class="rotate" src="images/ring3.png">
    <img id="ringFour" class="rotate" src="images/ring4.png">
    <img id="ringFive" class="rotate" src="images/ring5.png">
    <img id="ringSix" class="rotate" src="images/ring6.png">
    <img id="ringSeven" class="rotate" src="images/ring7.png">
    <img id="ringEight" class="rotate" src="images/ring8.png">
    </div>

因此，当我悬停在这些图像上时，我希望图像显示在我悬停的相应图像的正下方，并且图像上的文本取决于链接（我的意思是我应该能够修改矩形框上显示的文本）

---

我知道我一开始没有给出太多的代码，但我不知道还能提供什么。以上代码中我缺少的只是矩形框图像的代码，但我没有在任何地方编写它，因为位置需要根据悬停来确定和更改

试试这个；将您的图像放入一个内联的

，然后您可以将该.rect div附加到悬停的每个图像上。这里还有一个例子

HTML

<ul id="imageRings">
    <li><img class="rotate" src="images/ring1.png"></li>
    <li><img class="rotate" src="images/ring2.png"></li>
    <li><img class="rotate" src="images/ring3.png"></li>
    <li><img class="rotate" src="images/ring4.png"></li>
    <li><img class="rotate" src="images/ring5.png"></li>
    <li><img class="rotate" src="images/ring6.png"></li>
    <li><img class="rotate" src="images/ring7.png"></li>
    <li><img class="rotate" src="images/ring8.png"></li>
</ul>
<div class="rect"></div>​

CSS

#imageRings li{display:inline-block;}
.rect{border:1px solid red;background:#a55;height:20px;display:none;}​

---

将您的图像放入分区和/或列表中，如下所示

<div id="hover">
<div class="ima 1">
<img src="your_img_1" />
<div class="fill">
</div></div>
<div class="ima 3">
<img src="your_img_2" />
<div class="fill">
</div></div>
<div class="ima 2">
<img src="your_img_3" />
<div class="fill">
</div>
</div></div>

Jquery：

$('.ima img').hover(function(){
$(this).parent().find('.fill').html('<img src="image" />');
},
function(){
$(this).parent().find('.fill').html('  ');
}
);

$（'.ima img'）.hover（函数（）{
$（this.parent（）.find（'.fill'）.html（''）；
},
函数（）{
$（this.parent（）.find（'.fill'）.html（''）；
}
);

@Palash我写了8行不同的图像显示在悬停画面上，我的意思是在我写的每一张图像旁边”“并通过$（'#ringOne'）改变了可见性。悬停（function（）{$（'#box'）.show（）}，function（）{$（'#box'）.hide（）}）；对于其余的图像，依此类推。你能改变HTML吗？我建议把它们放在一个无序的列表中，而不是像那样自由浮动。根据html现在的状态，您需要获得悬停图像的当前位置，并将其应用于带有一些偏移的矩形；但是，如果每个图像都位于

中，那么您可以简单地将矩形附加到每个图像上，而不必费心计算。只需要将你的

内联。@Syon我可以更改HTML，我该如何做，下面用JSFIDLE示例发布了一个答案。我也尝试了你的JSFIDLE，它也不起作用。谢谢您的帮助。@Kapilchattani哇-对不起，我忘了保存更新。这是正确的小提琴，我试着运行你的代码，但移动鼠标后图像没有隐藏，我不知道为什么，但它们也没有向左浮动。。我偷了它。。这里：感谢你的帮助，谢谢。5分钟后回复你。我会在你的小提琴上测试它。当我在第一张图像上悬停时，第二张和第三张图像会自动下降。我忘了关闭一些标记。我的错

.ima{
float:left /*Float to make parallel*/
}

img{
display:block;
}

$('.ima img').hover(function(){
$(this).parent().find('.fill').html('<img src="image" />');
},
function(){
$(this).parent().find('.fill').html('  ');
}
);