CODEWITHSUNDEEP
htmlcsshoverz-index
sonlexqt
sonlexqt

Reputation: 6469

Hover over an Image, change another Image's z-index

I have a webpage with 6 small images and 1 big images in the center (which is really 6 layers, each contains 1 images), just like this: http://jsbin.com/onujiq/1/; I've set the z-index property of all center images to (-1). What I'm trying to do is when I hover over 1 of the 6 small images, the respectively image will appear as the big images in the center (by change the respectively center image's z-index to 5 - for example) ; but no matter how I try, It's doesn't work as what I want. Please help me with this (I only use CSS); thank you in advance !

PS: another confusing problem when i test about hover is when I use this code:

#img3:hover + #img4{
    opacity: 0.2;
}

it does work, but when i use this:

#img3:hover + #img5{
    opacity: 0.2;
}

it doesn't ! I still dont' know what is the big different between #img4 & #img5 ??

Upvotes: 2

Views: 3818

Answers (2)

Dom Day
Dom Day

Reputation: 2562

http://jsfiddle.net/yy9Rr/

Your solution was close, but you need to change it from

#img3:hover + #img4{
    opacity: 0.2;
}

to use the ~, to give something like

#img3:hover ~ #imgCenter3 {
    z-index: 10;
}

a + b says any b element immediately following element a

a ~ b says any b element that is a following sibling of a, not necessarily immediately adjacent.

Upvotes: 2

dunnmifflsys
dunnmifflsys

Reputation: 621

Try using JavaScript:

document.getElementById("img3").onmouseover = function() {
document.getElementById("img4").style.opacity = ".2";
document.getElementById("img5").style.opacity = ".2";
}

Upvotes: 0

Related Questions