Question

我正在尝试制作一个淡入的叠加层，并且当您将鼠标悬停在图像上时会有一个旋转的div。我已经能够使叠加层工作得很好但它出现在页面上的所有图像上，我只希望它显示在你悬停的图像上。

这是我的HTML

            </div><!-- end .image -->

            <div class="overlay"></div>
            <div class="button">
            </div>
        </div><!-- end .link -->

                <div class="link">

            <div class="image">

            </div><!-- end .image -->

            <div class="overlay"></div>
            <div class="button">

            </div>
        </div><!-- end .link -->

我的Jquery

$(".image").mouseover(function () {

$('.overlay').fadeTo(300, 0.5);

$('.button').show(200, function () {

    $(".button").addClass('box_rotate box_transition').delay(200).queue(function (next) {
        $(this).removeClass("box_rotate");
        next();
    });

});


});

和css

.link {
    height: 167px;
    position: relative;
    margin-top: 10px;

}
.overlay {
    height: 167px;
    width: 250px;
    background-color: #000;
    position: absolute;
    top: 0px;
    display: none;
    z-index: 1;
}
.image {
    height: 167px;
    width: 250px;
    position: absolute;
     background-color: #ccc;
    top: 0px;
    -webkit-transition: all;
    -moz-transition: all;
    -ms-transition: all;
    -o-transition: all;
    transition: all;
}
.button {
    position: absolute;
    background-color: #fff;
    height: 40px;
    width: 40px;
    z-index: 20;
    display: none;
    left: 100px;
    top: 50px;
}
.box_rotate {
    -webkit-transform: rotate(30deg);
    /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(30deg);
    /* Firefox 3.5-15 */
    -ms-transform: rotate(30deg);
    /* IE 9 */
    -o-transform: rotate(30deg);
    /* Opera 10.50-12.00 */
    transform: rotate(30deg);
    /* Firefox 16+, IE 10+, Opera 12.50+ */
}
.box_transition {
    -webkit-transition: all 0.3s ease;
    /* Chrome 1-25, Safari 3.2+ */
    -moz-transition: all 0.3s ease;
    /* Firefox 4-15 */
    -o-transition: all 0.3s ease;
    /* Opera 10.50–12.00 */
    transition: all 0.3s ease;
    /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}

Answer 1

尝试：

$(".image").mouseover(function () {
    $(this).next('.overlay').fadeTo(300, 0.5);
    $(this).closest('div.link').find('.button').show(200, function () {
        $(this).addClass('box_rotate box_transition').delay(200).queue(function (next) {
            $(this).removeClass("box_rotate");
        });
    });
});

<强> jsFiddle example

您需要使用this来引用您悬停的特定元素。因此$('.overlay').fadeTo(300, 0.5);会触发所有叠加元素，而$(this).next('.overlay').fadeTo(300, 0.5);只会触发图像旁边的叠加元素。该按钮是一个类似的情况，只需要一系列不同的jQuery函数。

Answer 2

我已经格式化了代码。看看这是否有帮助：

$(".image").mouseover(function () {
$(this).next().fadeTo(300, 0.5);
$(this).siblings('.button').show(200, function () {
$(this).addClass('box_rotate box_transition').delay(200).queue(function (next) {
   $(this).removeClass("box_rotate");
    next();
});
});});

<强> Working Demo

Answer 3

$(".image").mouseover(function () {
    $(this).parent().find('.overlay').fadeTo(300, 0.5);
    $(this).parent().find('.button').show(200, function () {
        $(this).parent().find(".button").addClass('box_rotate box_transition').delay(200).queue(function (next) {
            $(this).removeClass("box_rotate");
            next();
        });
    }); 
});

JSFiddle

Jquery为div中的元素运行函数

3 个答案: