单击覆盖 div 以激活具有效果的阴影框答案

【问题标题】：Click on overlay div to activate shadowbox with effect单击覆盖 div 以激活具有效果的阴影框
【发布时间】：2014-07-04 05:33:47
【问题描述】：

我正在尝试创建一个画廊，我在其中单击覆盖 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);
}

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

【问题讨论】：

标签： jquery css shadowbox

【解决方案1】：

试试这个

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

你能解释为什么我被否决了吗？这是带有我的代码的jsfiddle。它工作正常。