1

私はコーディングに非常に慣れていませんが、コンピューターでの経験があります。次のWebサイトでは、cssのみで記述されたホバー拡大効果を作成しています。

リンク： http： //3514.linux3.testsider.dk/da/produkter/skumdetektorer Chromeで1、4、5、6、7 ...の画像を見ると、深刻なスタッキング/レイヤーがあります/ホバーの優先度の問題。

すべてのブラウザは1週間前は正常に動作していましたが、突然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:クロムの画像がホバー時にちらつくのを防ぐために使用されます。

z-index:ページホルダーシャドウの優先度（ページの右側にある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 に答える