CODEWITHSUNDEEP
jqueryhtmlcssz-index
Lexys
Lexys

Reputation: 49

How to set z-index on hover with jQuery?

How can I set the z-index on hover of an img element? When the mouse pointer is outside of the img, the z-index must be 0, otherwise, it should be 9.

I do know how to set it, but not how to change it on hover.

$('#content img').click(function () {
    $(this).css("z-index", "99")
});

Upvotes: 2

Views: 9838

Answers (3)

Eugine Joseph
Eugine Joseph

Reputation: 1558

Try this one

$('#content img').hover( 
   function() { 
     $(this).css("z-index", "99")
   },
   function() { 
     $(this).css("z-index", "0")
   });

Upvotes: 2

John Dvorak
John Dvorak

Reputation: 27287

A css-only solution:

 #content img{
   z-index:0;
 }

 #content img:hover{
   z-index:9;
 }

Upvotes: 4

HungryCoder
HungryCoder

Reputation: 7616

$('#content img').mouseover(function () {
    $(this).css("z-index", "9")
});

$('#content img').mouseout(function () {
    $(this).css("z-index", "0")
});

Upvotes: 9

Related Questions