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定義を追加し、関数で 2 番目の関数を使用します。更新されたコードは次のようになります。#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()ドキュメントをよく読んでください。引数リストで 2 つのハンドラー関数を受け入れることができることに注意してください。1 つはホバーの開始時に呼び出され、もう 1 つはホバーの終了時に呼び出されます。

もちろん、次の CSS だけを追加することで、いつでも:hover疑似クラスを使用できます。#engines

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

これは、動作中の CSS メソッドを示すjsFiddleです。

于 2013-08-28T07:46:09.513 に答える
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 に答える
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 に答える