Измените другой divs css на зависание div

Question

Так что я пытаюсь изменить эффект зависания моих div. Когда я начал проект, у меня это было так, как я хочу сейчас, но тогда я не хотел этого, поэтому я изменил его. Теперь я не могу изменить его.

так вот мой код,

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; 
} 

А вот код в действии: JsFiddle

Итак, что я хочу достичь, так это то, что когда я нахожу левый div, эффект, который теперь происходит на левом div, должен происходить в правом div. Кусок кода, который делает зависание работы это кусок ниже:

#rightImage:hover, #leftImage:hover 
{ 
    opacity:0.15; 
    filter: alpha(opacity=15); /* For IE8 and earlier */  
    background: rgba(0, 0, 0, 1.0); 
} 

Я учил один из следующих операторов будет работать: «+», «~», или только простое пространство между: парить и следующий div (#rightImage:hover #leftImage).

Но я не могу заставить его работать. Что я делаю неправильно? Разве что элементы не имеют одного и того же родителя? Я попытался добавить родительский div arround весь html. Но это не сработало.

Answer 1

Насколько я знаю, состояния зависания могут влиять только на зависающий элемент или дочерние элементы. Для этого вам нужно использовать легкий javascript.

Answer 2

Вы должны иметь возможность обертывать как ваши #left, так и #right div, а затем применить стиль зависания к этому элементу. Как это:

<div class="wrapper"> 
    <div id="left"> ... </div> 
    <div id="right"> ... </div> 
</div> 

, а затем ...

.wrapper:hover #rightImage, .wrapper:hover #leftImage{ 
    opacity:1.00; 
    filter: alpha(opacity=100); 
    /* For IE8 and earlier */ 
    background: rgba(0, 0, 0, 1.0); 
} 

Смотрите эту fiddle.