1

我对编码很陌生，但在计算机上经验丰富。在以下网站上，我正在创建一个放大悬停效果，仅用 css 编写。

链接：http: //3514.linux3.testsider.dk/da/produkter/skumdetektorer 如果您在 Chrome 中查看第 1、4、5、6、7... 图像，它们有严重的堆叠/层/悬停时的优先级问题。

一周前每个浏览器都运行良好，但突然 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:用于覆盖 pageholder-shadow 优先级（页面右侧为 998），以便图像在悬停时越过而不是下方。正如您在 Firefox 或任何其他浏览器中查看链接时所看到的...

4

2 回答 2

4

尝试添加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;
}
于 2012-06-06T14:11:56.703 回答
4

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

.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;**

}
于 2012-11-07T06:53:58.323 回答