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>元素占用一些高度，然后使用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。请注意，它可以接受参数列表中的两个处理函数，一个在悬停开始时调用，一个在结束时调用。

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

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

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

Answer 2

您可以使用:hover伪类：

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

Answer 3

尝试这个更新的小提琴。您可以使用find（）方法获取所有子项：http://jsfiddle.net/sLytQ/2/

$('document').ready(function() {
    $("#engines").find('*').hover(function() {
            $('#engine1').css("box-shadow", "3px 3px 4px #000");
    });

    $("#engines").find('*').mouseout(function() {
            $('#engine1').css("box-shadow", "0px 0px 0px #000");
    });
});

Answer 4

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

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

});

Answer 5

试试这个，

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


});
</script>

如何使用图像创建投影

5 个答案: