Question

I have a Div and what I want to happen, is when you hover on div 1 it changes div 2.

So I can do this is CSS with .div1:hover .div2so this means that when I hover on 1, 2 will change.

I have used this before and even on the same style sheet, but for some reason it does not work .

This is the CSS.

#slide {
width:220%;
height:300px;
text-align:center;
position:relative;
top:0px;
left:0px;
-webkit-transition: left 2s linear;
-moz-transition: left 2s linear;
-ms-transition: left 2s linear;
-o-transition: left 2s linear;
transition: left 2s linear;
}
.six {
position:relative;
top:0px;
left:0px;
background-color:#F00;
}
.six:hover #slide {
left:-100%;
}

So this looks good to me and it works on the same style sheet, but something is stopping it?

Any ideas would be great.

Answer 1

The .div1:hover .div2 selector refers to “an element with class div2 that is a child of an element with class div1 that is hovered over”, so it will only work if div2 is a child of div1.

If you need div2 to be unrelated to div1, then you can only do this with JavaScript. Something like this (using the jQuery library):

$('.div1').hover(function() {
    $('.div2').addClass('div1-hovered-on');
}, function() {
    $('.div2').removeClass('div1-hovered-on');
});