根据我悬停在上面的按钮移动相同的图像

Move the same image according to the button I hover over

本文关键字：移动 图像 按钮 悬停 在上面      更新时间：2023-09-26

我在页面上有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;
}
Jquery:

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

试试这个;将您的图像放在内联<li>中，然后您可以将.rectdiv附加到悬停的每个图像上。这里也有一个jsFiddle的例子。

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

$('imageRings img').on({
    mouseenter: function() {
        $(this).closest('li').append($('.rect'));
        $('.rect').show();
    },
    mouseleave: function() {
        $('.rect').hide()
    }
})​;
CSS

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