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

Question

我在页面上有 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>

所以这些是我悬停在其上的图像，我希望图像出现在我悬停的相应图像的正下方，并根据链接在其上显示文本(我的意思是我应该能够修改显示在矩形框)

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

Answer 1

按以下方式将您的图像划分和/或列表

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

定位为

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

img{
display:block;
}

J查询:

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