CODEWITHSUNDEEP
jqueryhtmlcss
zppinto
zppinto

Reputation: 297

Display <div> according to z-index value

I want to display the photoCaption div every time the mouse is over an image with the z-index == 19.
However the code I've developed has 2 problems.

  1. It displays the div photoCaption on all the images
  2. When mouse is out, and mouse is over again, the div is not displayed any more.

What I'm doing wrong? The 2nd line of javascript code is probably wrong since it's always true.

Here is the code

Upvotes: 2

Views: 726

Answers (4)

Aravind30790
Aravind30790

Reputation: 992

$('img').bind('mousemove', function (e) {
    if ($(this).css('zIndex', 19)) {
        $('#photoCaption').css({
            display: 'block',
            left: e.pageX + 20,
            top: e.pageY,
            'z-index': 100
        });
    }
    $(this).mouseout(function () {
    $('#photoCaption').css({
        display: 'none'
    });
})
});

DEMO

Upvotes: 0

writeToBhuwan
writeToBhuwan

Reputation: 3281

Solves Both your problems..

$('img').css('position','relative');
$('img').on('mousemove', function (e) {
    if ($(this).css('zIndex')=='19') {
        $('#photoCaption').css({
            display: 'block',
            left: e.pageX + 20,
            top: e.pageY,
            'z-index': 100
        });
    }
});

$('img').mouseout(function () {
    $('#photoCaption').css({
        display: 'none'
    });
});

Fiddle

Upvotes: 0

Prisoner
Prisoner

Reputation: 27618

First issue, your conditional statmenet should be:

if($(this).css('z-index') == 19) { // you're using $('img') which returns all img elements and then you're setting the z-index to 19 for all of them.

but z-index will read auto unless you add position to the img elements. So add: 

img{
    position: relative;
}

You've also set display to display, which is incorrect, it should read:

display: 'block', // could also be inline, inline-block etc

Working example here: http://jsfiddle.net/mgJLp/5/

Upvotes: 3

Brendan Bullen
Brendan Bullen

Reputation: 11808

To correct the issue with the caption only showing once, change your mouseover event to:

$('img').bind('mousemove', function (e) {
    if ($('img').css('z-index') == '19') {
        $('#photoCaption').css({
            display: 'block',
            left: e.pageX + 20,
            top: e.pageY,
            'z-index': 100
        });
    }
});

The display property gets set to block to show the caption div.

As for only displaying the caption on images with a z-index of 19, using the z-index as a means of distinguishing elements isn't ideal. Using a class selector if possible would be easier.

As it stands, with your current javascript, you are setting the z-index rather than checking it. Check out the new condition above $('img').css('z-index') == '19'

Upvotes: 1

Related Questions