Question

我正在尝试创建一个库，我单击on overlay div，因此shadowbox模式打开时会显示相应的图像。这是我的标记

 <li class="grow pic">
 <a class="shadowboxLink" href="img/car_details/1large.jpg" rel="shadowbox">
 <div class="overlayForCarDetails"></div>
 <img class="mediumImg" src="img/car_details/1medium.jpg" alt=""></a>
 </li>

现在，当我点击一个链接时，它工作正常。我想在链接覆盖图上添加效果所以我添加了像这样的jquery

        $('.shadowboxLink').mouseenter(function () {
            $(this).children('.overlayForCarDetails').css('opacity', '0.7');
            $(this).children('.overlayForCarDetails').next().find('.mediumImg').addClass('zoomed');
        });

但不知何故，该课程未被应用。

班级是

.zoomed {
-moz-transform: scale(1.10);
-webkit-transform: scale(1.10);
-o-transform: scale(1.10);
transform: scale(1.10);
-ms-transform: scale(1.10);
}

请告诉我我在哪里做错了。 感谢。

Answer 1

试试这个

 $('.shadowboxLink').mouseenter(function () {

            $(this).children('.overlayForCarDetails').css('opacity', '0.7');
            $(this).children('.overlayForCarDetails').next('.mediumImg').addClass('zoomed');
        });

Answer 2

当您可以使用.children('.overlayForCarDetails').next().find('.mediumImg')时，您不必要地添加了.find('.mediumImg') 改为：

$('.shadowboxLink').mouseenter(function () {
    $(this).children('.overlayForCarDetails').css('opacity', '0.7');
    $(this).find('.mediumImg').addClass('zoomed');
});

单击overlay div激活有效的shadowbox

2 个答案: