Question

我正在使用jQuery对图像叠加进行编码，并且我（有点）工作了。如果将鼠标悬停在第一张图像上，则会成功显示;但是，如果你将鼠标悬停在第二个上面，它甚至无法工作。我甚至不知道问题是什么！我认为它与唯一ID或其他任何东西有关。我尝试过课程，但它没有用。

这是小提琴:: http://jsfiddle.net/PFWcz/7/

$(document).ready(function () {
    $('.overlay-link').mouseover(function () {
        $(this).find('.overlay').fadeIn(200);
    }).mouseleave(function () {
        $(this).find('.overlay').fadeOut(200);
    });
});

Answer 1

有一些问题。正如esqew指出的那样，您使用的ID必须是唯一的。

解决这个问题，你仍然可以看到＆＃34;相同的＆＃34;覆盖在你的小提琴中（http://jsfiddle.net/PFWcz/7/），但事实并非如此 - 你刚刚看到position问题。

看看这个小提琴：

http://jsfiddle.net/PFWcz/10/

您会注意到，当您将鼠标悬停在第一张图片上时，红色叠加层为＆＃34; 1＆＃34;，当您将鼠标悬停在第二张图片上时，叠加层为＆＃34; 2＆＃34 ;。

以前（使用＆＃34; helloooooo＆＃34;文本），红色叠加层显示相同（因为内容和定位）......

解决ID和position问题，它应该有效。

这是一个演示固定位置和ID的小提琴：

http://jsfiddle.net/PFWcz/16/

主要的变化是给容器（<div>）定位：

div {
    float: left;
    margin: 30px;
    position: relative;
}

此外，我删除了偏移量（左，上）和浮点数，将它们应用于父容器。一个快速，简单的解决方案。

Answer 2

您正在使用相同的id，必须是唯一的。使用class属性。

Answer 3

您需要将overlay-link个元素作为容器的子元素继承位置。

<a class="overlay-link">
    <img src="https://d13yacurqjgara.cloudfront.net/users/67256/screenshots/1191507/shooot.png"/>
    <span class="overlay"><i>hellllllllooooooo</i></span>
</a>

您的overlay-link课程需要position: relative，并且会定义它及其子女的位置和大小：

.overlay-link {
    position: relative;
    display: block;
    width: 292px;
    height: 219px;
    margin: 30px;
}

里面的任何孩子都需要position: absolute，其宽度和高度设置为容器的100％：

img {
    position: absolute;
    border-radius: 2px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.overlay {
    background-color: rgba(223, 71, 71,0.70);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 2px;
    display: none;
    text-align:center;
}

现在，当您将鼠标悬停在某个元素上时，它会在该元素上创建叠加层而不是您之前遇到的另一个叠加层。

Hover

Jsfiddle：http://jsfiddle.net/PFWcz/14/

Answer 4

由于部分答案已经说过id有问题，我不想重复。由于您有多个地方想要在翻转时显示一些文字，因此使用class将是更好的解决方案/方式。

以下是我在 fiddle 中所做的更改：

.overlay-link { /*This class is added. Since an absolute positioned element places itself relative to its parent who is either a relative positioned element or an absolute positioned element. I made the parent of the .overlay div relative.*/
    position: relative;
    background-color: #ff0;
}
.overlay {
    position: absolute;
    background-color: rgba(223, 71, 71,0.70);
    left: -322px; /*Positioning the .overlay element based on its parents left*/
    width: 292px;
    height: 219px;
    border-radius: 2px;
    top: 30px;
    display: none;
    text-align:center;
}

.overlay i { /*There is no .shot element in the DOM. I replaced it by .overlay*/
    background-color: #df4747;
    border-radius: 999px;
    padding: 10px;
    width: 60px;
    height: 60px;
    color: #fff;
    font-size: 30px;
    top: 80px;
    left: 116px;
    position: absolute;
    display: block;
}

这是基于我的理解。如果有效，请告诉我。

Answer 5

在这里，这就是你想要的

小提琴：http://jsfiddle.net/D33Yk/

$(window).on('load',function () {
    $('.overlay-link').mouseover(function(){
        var overlay = $(this).children('.overlay');
        var img = $(this).children('img');
        $(overlay).css('left',$(img).offset().left);
        $(overlay).css('top',$(img).offset().top);
        $(overlay).css('width',$(img).width());
        $(overlay).css('height',$(img).height());
        $(overlay).fadeIn(200);
    }).mouseleave(function(){
        $(this).children('.overlay').fadeOut(200);
    });
});

因为您的叠加层绝对位于CSS中，所以两个叠加层始终覆盖第一张图像。我现在在JS中设置left，top，width和height，因此叠加层会覆盖各自的图像。

我也在CSS中改变了这个：

.overlay {
    display: none;
    position: absolute;
    background-color: rgba(223, 71, 71,0.70);
    border-radius: 2px;
    text-align:center;
}

删除了顶部，左侧，宽度，高度

...这在HTML中（我改变了两者，但我只显示一个，因为它们是相同的）：

<div>   
    <a class="overlay-link">
        <img src="https://d13yacurqjgara.cloudfront.net/users/67256/screenshots/1191507/shooot.png"/>
        <span class="overlay"><i>hellllllllooooooo</i></span>
    </a>
</div>

将所有ID更改为类，并删除不需要的ID

为什么不覆盖所有图像？

5 个答案: