Question

所以我正在尝试构建一个包含2个div的链接页面。两者都占据屏幕的50％。我想保留这个100％的CSS，因为我不想使用javascript而且我不喜欢Jquery。

根据很多stackoverflow帖子，我的问题似乎是一个bug。然而，他们都没有为我提供有效的解决方案.. 除了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/

Chrome不透明度转换错误

1 个答案: