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

试试这个;将图像放在内联<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;}

Answer 2

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

<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('  ');
}
);

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

2 个答案: