Warum verschieben sich Bilder beim Hover in Chrome nach rechts und wie lässt sich das beheben?

Bildbewegung beim Hover: Behebung des Deckkraftproblems in Chrome

Benutzer haben ein Problem gemeldet, bei dem sich Bilder beim Hover leicht nach rechts bewegen. aber nur in Chrome. Dieses Problem entsteht durch die Verwendung von Deckkraft zur Steuerung der Bildtransparenz.

Überprüfung des CSS

Um das Problem zu untersuchen, untersuchen wir das bereitgestellte CSS:

<code class="css">.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;
}</code>

Behebung des Problems

Eine alternative Lösung besteht darin, die Eigenschaft -webkit-backface-visibility für die Hover-Elemente mit Deckkraft zu verwenden. Diese Eigenschaft beeinflusst, wie die Rückseite des Elements bei der Transformation gerendert wird. In diesem Fall wird die unbeabsichtigte Bewegung behoben, die durch Deckkraftänderungen in Chrome verursacht wird.

Wenden Sie die folgende Eigenschaft auf den Schwebezustand an:

<code class="css">-webkit-backface-visibility: hidden;</code>

Zusätzliche Überlegungen

Die Eigenschaft -webkit-backface-visibility ist spezifisch für WebKit-Browser, daher benötigen Sie möglicherweise Herstellerpräfixe für andere Engines. Ausführlichere Informationen finden Sie in der CSS-Tricks-Dokumentation.

Das obige ist der detaillierte Inhalt vonWarum verschieben sich Bilder beim Hover in Chrome nach rechts und wie lässt sich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!