jquery - 如何使用图像创建投影

Question

我正在尝试在悬停时创建投影。这是我写的代码。问题是当我将鼠标移到 div 上时，它会发光，但是当我将鼠标移到图像上时，它会发光。

<style>

#engines {
    margin: 0;
    padding: 0;
}

#engines div {
    float: left;
    width: 110px;
    height: 130px;
    border: 1px solid #eeeeee;
}

#engines div img {
    margin: 5px 0 0 15px;
}


</style>

<script>
    $('document').ready(function() {
        $("#engines").children().hover(function() {
            $(this).css("box-shadow", "3px 3px 4px #000");
        });

        $("#engines").children().mouseout(function() {
            $(this).css("box-shadow", "0px 0px 0px #000");
        });

    });
</script>


</head>

<div id="engines">
    <div id="engine1">
        <img
            src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Mercedes_V6_DTM_Rennmotor_1996.jpg"
            width="80px" height="100px" />Dibya
    </div>

</div>

这是 demo

Answer 1

添加 float: left定义为 #engines这样包含 <div> element会占据一些高度，然后使用hover()中的第二个函数功能。您更新后的代码应如下所示:

CSS:

#engines {
    margin: 0;
    padding: 0;
    float: left;
}

#engines div {
    float: left;
    width: 110px;
    height: 130px;
    border: 1px solid #eeeeee;
}

#engines div img {
    margin: 5px 0 0 15px;
}

jQuery:

$("#engines").hover(function() {
    $(this).css("box-shadow", "3px 3px 4px #000");
}, function() {  
    $(this).css("box-shadow", "0px 0px 0px #000");
});

这是更新的 jsFiddle

您应该阅读 hover() documentation .请注意，它可以在参数列表中接受两个处理函数，一个在悬停开始时调用，一个在悬停结束时调用。

当然，您始终可以使用 :hover #engines 的伪类通过单独添加以下 CSS:

#engines:hover {
    box-shadow: 3px 3px 4px #000;
}

这是一个 jsFiddle显示实际的 CSS 方法。