Change an other divs css on hover of a div - html

Question

So i'm trying to change the hover effect of my divs. When I started the project I had it just the way I want it now, but back then I didn't want it that way, so I changed it. Now I can't seem to change it back.
so here is my code,
HTML
<div id="left">
<div id="leftImage">
//the background image
</div>
<div id="overlayLeft">
//a logo that goes on top of the image when not hovering over it
</div>
</div>
<div id="right">
<div id="rightImage">
//the background image
</div>
<div id="overlayRight">
//a logo that goes on top of the image when not hovering over it
</div>
</div>
CSS
body {
background: #ffff;
}
/* Setup for the halves of the screen */
#right
{
/* Set rules to fill background */
min-height: 100%;
min-width: 50%;
/* Set up proportionate scaling */
width: 50%;
height: auto;
position: fixed;
top: 0;
right: 0;
background: #389A7A;
background-size:cover;
}
#left
{
/* Set rules to fill background */
min-height: 100%;
min-width: 50%;
/* Set up proportionate scaling */
width: 50%;
height: auto;
position: fixed;
top: 0;
left: 0;
background: #0C4270;
background-size:cover;
}
/* Setup for the image containers */
#rightImage, #leftImage
{
opacity:1.00;
filter: alpha(opacity=100); /* For IE8 and earlier */
background: rgba(0, 0, 0, 0.15);
-webkit-transition: opacity 2.00s ease;
-moz-transition: opacity 2.00s ease;
transition: opacity 2.00s ease;
position: relative;
}
#rightImage:hover, #leftImage:hover
{
opacity:0.15;
filter: alpha(opacity=15); /* For IE8 and earlier */
background: rgba(0, 0, 0, 1.0);
}
#rightImage:hover + #overlayRight, #leftImage:hover + #overlayLeft
{
visibility: visible;
-webkit-transition: visibility 0.5s ease;
-moz-transition: visibility 0.5s ease;
transition: visibility 0.5s ease;
}
/* Setup for the images */
.rightImage
{
/* Set rules to fill background */
min-width: 50%;
min-height: 100%;
/* Set up proportionate scaling */
width: 50%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0px;
right: 0;
}
.leftImage
{
/* Set rules to fill background */
min-width: 50%;
min-height: 100%;
/* Set up proportionate scaling */
width: 50%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0px;
left: 0;
}
/* Setup for the logo image */
#overlayLeft
{
visibility: hidden;
}
.overlayLeft
{
/* Set rules to fill background */
min-width: 40%;
/* Set up proportionate scaling */
width: 40%;
/* Set up positioning */
position: absolute;
top: 35%;
left: 30%;
pointer-events: none;
}
#overlayRight
{
visibility: hidden;
}
.overlayRight
{
/* Set rules to fill background */
min-width: 40%;
/* Set up proportionate scaling */
width: 40%;
/* Set up positioning */
position: absolute;
top: 40%;
right: 30%;
pointer-events: none;
}
And here is the code in action: JsFiddle
So what i want to achieve is that when I hover the left div the effect that now happens ons the left div must happen on the right div. The piece of code that is making the hovering work is this the piece below:
#rightImage:hover, #leftImage:hover
{
opacity:0.15;
filter: alpha(opacity=15); /* For IE8 and earlier */
background: rgba(0, 0, 0, 1.0);
}
I tought one of the following operators would work: "+", "~", or just a simple space between :hover and the next div (#rightImage:hover #leftImage).
Yet I cannot seem to get it to work..
What am I doing wrong? Is it that the elements doesn't have the same parent? I tried adding a parent div arround the whole html. Yet that didn't work.

Answer 1

As far as I am aware hover states can only affect the element being hovered or child elements. You'll need to use some light javascript to achieve this.

Answer 2

You should be able to wrap both your #left and #right div's and then apply the hover style to that element. Like this:
<div class="wrapper">
<div id="left"> ... </div>
<div id="right"> ... </div>
</div>
and then ...
.wrapper:hover #rightImage, .wrapper:hover #leftImage{
opacity:1.00;
filter: alpha(opacity=100);
/* For IE8 and earlier */
background: rgba(0, 0, 0, 1.0);
}
See this fiddle.