我在页面上有 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>
所以这些是我悬停在其上的图像,我希望图像出现在我悬停的相应图像的正下方,并根据链接在其上显示文本(我的意思是我应该能够修改显示在矩形框)
我知道一开始我没有提供太多代码,但我不知道还能提供什么。上面的代码中我只缺少了矩形框图像的代码,但是我没有把它写在任何地方,因为位置是需要根据悬停来确定和改变的。
最佳答案
按以下方式将您的图像划分和/或列表
<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(' ');
}
);
关于javascript - 根据我悬停的按钮移动相同的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14111753/