更改其他div div的悬停css

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

我因子评分以下的运营商之一，将工作：“+”，“~”，或只是一个简单的空间之间：hover和下一个div（#rightImage:hover #leftImage）。

但我似乎无法得到它的工作.. 我在做什么错？它是不是有相同的父母？我试着在整个html中添加一个父div。然而，这并没有奏效。

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。