0

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

所以这些是当我悬停时我希望图像出现在我悬停在相应图像下方的图像，以及取决于链接的文本（我的意思是我应该能够修改显示在矩形框中的文本）

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

4

2 回答 2

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

查询：

$('.ima img').hover(function(){
$(this).parent().find('.fill').html('<img src="image" />');
},
function(){
$(this).parent().find('.fill').html('  ');
}
);
于 2013-01-01T16:11:23.913 回答
1

尝试这个; 将您的图像放在 inline<li>中，然后您可以在悬停时将该 .rect div 附加到每个图像。这也是一个jsFiddle示例。

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

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;}​
于 2013-01-01T16:01:42.147 回答