CODEWITHSUNDEEP
jquerycss
NewUser
NewUser

Reputation: 3819

How to create a drop shadow with image

I am trying to create a drop shadow on hover. This is the code I have written. The problem is when the I move mouse over the div, it glows but when I move the mouse over the image, the glow disappears.

<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>

This is the demo

Upvotes: 0

Views: 997

Answers (5)

BenM
BenM

Reputation: 53198

Add a float: left definition to #engines so that the containing <div> element will occupy some height, and then use the second function in the hover() function. Your updated code should look like this:

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");
});

Here's an updated jsFiddle

You should read over the hover() documentation. Note that it can accept two handler functions in the argument list, one called when the hover begins, and one when it ends.

Of course, you could always use the :hover pseudo-class for the #engines by adding the following CSS alone:

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

Here's a jsFiddle showing the CSS method in action.

Upvotes: 1

Manu M
Manu M

Reputation: 1064

Try this,

<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>

Upvotes: 0

Feng77
Feng77

Reputation: 21

    $('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");
    });

});

Upvotes: 0

Blasius Secundus
Blasius Secundus

Reputation: 171

You can use the :hover pseudoclass:

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

Upvotes: 0

Yeronimo
Yeronimo

Reputation: 1749

Trye this updated fiddle. You can use the find() method to get all children: 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");
    });
});

Upvotes: 0

Related Questions