Warum verschiebt sich mein Bild beim Schweben in Chrome und wie kann ich das Problem beheben?

Bild bewegt sich beim Bewegen des Mauszeigers – Problem mit der CSS-Deckkraft in Chrome

Wenn Sie den Mauszeiger über die Miniaturansichten auf der unten verlinkten Webseite bewegen, bewegt sich das Bild leicht nach rechts, ein Problem Wird nur in Chrome beobachtet.

http://www.lonewulf.eu

Das folgende CSS wird verwendet:

.img{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    -moz-opacity: 0.5; 
    opacity: 0.5;
    -khtml-opacity: 0.5;
    display:block;
    border:1px solid #121212;
}
.img:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity: 1; 
    opacity: 1;
    -khtml-opacity: 1;  
    display:block;
}

Während dieses Problem möglicherweise mit der Transformation zusammenhängt, Eine effektivere Lösung besteht darin, Folgendes auf das Hover-Element anzuwenden, das Deckkraft nutzt:

-webkit-backface-visibility: hidden;

Die Sichtbarkeit der Rückseite beeinflusst die Transformation. Die Angabe dieser Eigenschaft ausschließlich für WebKit ist ausreichend, da es sich um ein WebKit-spezifisches Problem handelt. Es können andere Herstellerpräfixe vorhanden sein.

Weitere Informationen finden Sie unter http://css-tricks.com/almanac/properties/b/backface-visibility/.

Das obige ist der detaillierte Inhalt vonWarum verschiebt sich mein Bild beim Schweben in Chrome und wie kann ich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!