[JIMMYCSS]

Goal: When use hovers over Div1, Div2 is activated.

Here is my HTML:

<div id="images"></div><div id="box"></div></div>

Here is my CSS:

#box {
width:100px;
height:100px;
position: absolute;
left: 0;
top: 0;
background-color: #333;
}
#box:hover{
width:100px;
height:100px;
position: absolute;
left: 0;
top: 0;
background-color: #999;
}
#images {
background: url('image');
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-animation: slideshow 0s linear infinite;
-moz-animation: slideshow 00s linear infinite;
}
@-webkit-keyframes slideshow {
0% { left: 0; }
100% { left: -200%; }
}
@moz-keyframes slideshow {
0% { left: 0; }
100% { left: -200%; }
}
}
#box:hover + #images {
background: url('image');
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-animation: slideshow 20s linear infinite;
-moz-animation: slideshow 20s linear infinite;
}
@-webkit-keyframes slideshow {
0% { left: 0; }
100% { left: -200%; }
}
@moz-keyframes slideshow {
0% { left: 0; }
100% { left: -200%; }
}
}

[Kravvitz]

Welcome to DevShed Forums, JIMMYCSS.

The adjacent sibling combinator, "+", (and the general sibling combinator, "~", also) only works if the selector that precedes it is for the element that precedes the element matched be the selector that succeeds it.

Since you're using some absolute positioning anyway, just reverse the order of the two elements in your markup.

P.S. When posting code, please place it between [code][/code] tags.
If you want to use the button to add the tags, paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog).