在 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。