Chrome 不透明度过渡错误

Question

所以我正在尝试构建一个包含 2 个 div 的链接页面。 两者都覆盖了 50% 的屏幕。我想保留这个 100% CSS，因为我不想使用 javascript，而且我不熟悉 Jquery。

根据许多 stackoverflow 帖子，我的问题似乎是一个错误。然而，他们都没有对我有用的解决方案.. 除了 Chrome 和 Safari，css 的工作方式与我在每个浏览器中的计划一样。

这是我的 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 两边都是一样的（除了 left:0 之类的东西）

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

#leftImage {    
    opacity:0.15;
    filter: alpha(opacity=15); /* 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;     
    overflow: hidden;   
}

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

#leftImage:hover + #overlayLeft{
    visibility: hidden; 
}

因此，当我将鼠标悬停在左侧图像上时，图像会消失几秒钟（大约 10 秒），然后重新加载。我唯一看到的是蓝色背景，直到图像重新加载。

奇怪的是，这不会发生在我的正确图像上。该图像按预期工作。

我已经尝试了一些类似其他帖子中建议的方法，例如

-webkit-backface-visibility: hidden;

-webkit-transform: translateZ(0);

-webkit-perspective: 1000;

transform: translate3d(0px,0px,0px);

postition: static; （这个效果最好，但还是没用，因为图片不会被拉伸，会卡在左下角）

等等。甚至没有一个工作:( 我想达到什么目标？ - 我希望图像位于我没有悬停的 div 的背景上（所以它通过不透明度隐约可见） - 当 div 悬停时，图像应该完全可见（无不透明度）。

这两个功能都适用于除 Chrome 和 Safari 之外的所有浏览器。

有什么解决办法吗？

根据要求：jsfiddle（使用 Chrome 或 Safari 打开此错误）

Answer 1

我浓缩了几条:hover 规则，似乎已经解决了。

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:0.15;
    filter: alpha(opacity=15);
    /* 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:1.00;
    filter: alpha(opacity=100);
    /* For IE8 and earlier */
    background: rgba(0, 0, 0, 1.0);
}
#rightImage:hover + #overlayRight, #leftImage:hover + #overlayLeft {
    visibility: hidden;
}
/* 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: visible;
}
.overlayLeft {
    /* Set rules to fill background */
    min-height: 40%;
    min-width: 40%;
    /* Set up proportionate scaling */
    width: 40%;
    height: 40%;
    /* Set up positioning */
    position: absolute;
    top: 30%;
    left: 30%;
    pointer-events: none;
}
#overlayRight {
    visibility: visible;
}
.overlayRight {
    /* Set rules to fill background */
    min-height: 40%;
    min-width: 40%;
    /* Set up proportionate scaling */
    width: 40%;
    height: 40%;
    /* Set up positioning */
    position: absolute;
    top: 30%;
    right: 30%;
    pointer-events: none;
}

演示： https://jsfiddle.net/hopkins_matt/mxbjja29/2/