Question

我对编码很新，但在计算机上经验丰富。在下面的网站上，我创建了一种悬浮效果，仅用css编写。

LINK：http://3514.linux3.testsider.dk/da/produkter/skumdetektorer 如果您在第1，第4，第5，第6，第7张图片中查看Chrome，它们会在悬停时出现严重的堆叠/层/保护问题。

一周前，每个浏览器都运行正常，但Chrome突然开始表现......

我最初对所有浏览器都有同样的问题，但后来我通过搜索互联网修复了它，发现z-index设置是“页面优先”问题的答案。

我尝试搜索互联网的每个角落，每个可能的单词与主题相关，但一无所获。

以下是网站上使用的代码：

<style type="text/css">

.hovergallery img {
    -webkit-transform:scale(1); /*Webkit:Scale down image to 0.8x original size*/
    -moz-transform:scale(1); /*Mozilla scale version*/
    -o-transform:scale(1); /*Opera scale version*/
    -webkit-transition-duration:0.5s; /*Webkit:Animation duration*/
    -moz-transition-duration:0.5s; /*Mozilla duration version*/
    -o-transition-duration:0.5s; /*Opera duration version*/
    opacity:1; /*initial opacity of images*/
    -webkit-perspective:1000; 
    -webkit-backface-visibility:hidden;
}

.hovergallery img:hover {
    -webkit-transform:scale(1.6); /*Webkit:Scale up image to 1.2x original size*/
    -moz-transform:scale(1.6); /*Mozilla scale version*/
    -o-transform:scale(1.6); /*Opera scale version*/
    box-shadow:0px 0px 30px gray; /*CSS3 shadow:30px blurred shadow all around image*/
    -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
    -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
    opacity:1; /*initial opacity of images*/
    -webkit-perspective:1000;
    -webkit-backface-visibility:hidden;
    z-index:999;
}
    </style>

webkit-perspective:和webkit-backface-visibility:用于阻止Chrome中的图像在悬停时闪烁。

z-index:用于覆盖页面持有者阴影优先级（页面右侧998），以便图像在悬停时覆盖而不在其下。正如您在Firefox或任何其他浏览器中查看链接时所看到的那样......

Answer 1

尝试将position:relative;添加到.hovergallery img

.hovergallery img {
    -webkit-transform:scale(1); /*Webkit:Scale down image to 0.8x original size*/
    -moz-transform:scale(1); /*Mozilla scale version*/
    -o-transform:scale(1); /*Opera scale version*/
    -webkit-transition-duration:0.5s; /*Webkit:Animation duration*/
    -moz-transition-duration:0.5s; /*Mozilla duration version*/
    -o-transition-duration:0.5s; /*Opera duration version*/
    opacity:1; /*initial opacity of images*/
    -webkit-perspective:1000; 
    -webkit-backface-visibility:hidden;
    position:relative;
}

Answer 2

我有类似的问题。我有图像gallary，我在悬停效果中使用了不透明度，变换和缩放效果。缩放后的每个图像变得透明并在后台显示其他图像我根据上述讨论修改了代码，并将其粘贴在下面

.gallary{
    text-align:center;  

}

.gallary_img {
    display:inline-block;    
}

.gallary_img img{
border: 1px solid #660000;
display:inline-block;  
opacity:0.4;
-webkit-transition: -webkit-transform 0.5s ease-in;
**position:relative;**
}
.gallary_img img:hover {
    opacity:1.0;
    filter:alpha(opacity=100); /* For IE8 and earlier */
    border: 1px solid #660000;
    -moz-transform:  scale(2);
    -webkit-transform:  scale(2);
    transform: scale(2);
    **z-index:999;**

}

奇怪的CSS webkit-transform-scale悬停在Chrome中

2 个答案: