0

我正在尝试在悬停时创建阴影。这是我写的代码。问题是当我将鼠标移到 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>

这是演示

4

5 回答 5

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()文档。请注意，它可以接受参数列表中的两个处理函数，一个在悬停开始时调用，一个在悬停结束时调用。

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

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

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

于 2013-08-28T07:46:09.513 回答
0 
    $('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");
    });

});
于 2013-08-28T07:55:47.627 回答
0

尝试这个，

<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>
于 2013-08-28T07:58:58.473 回答
0

您可以使用:hover伪类：

#engines img:hover{
box-shadow: 3px 3px 4px black;
}
于 2013-08-28T07:44:50.687 回答
0

试试这个更新的小提琴。您可以使用 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");
    });
});
于 2013-08-28T07:48:13.797 回答