在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 arround。 但这没有用。

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

看到这个小提琴 。