CSS: Element im Hover-Status neu positionieren, aber klickbare Bereichsposition beibehalten

Question

Ich versuche, den Effekt einer Schaltfläche zu erzeugen, die sich von der Seite abhebt, wenn sie umgerollt wird.

CSS verwenden, habe ich einen Block Stil <a> Element, das, wenn schwebte, neu positioniert sich nach oben und nach links 5px, und ein Schatten hinter sich gelassen:

a { 
    display: inline-block; 
    position: relative; } 

a:hover { 
    top: -5px; left: -5px; 
    box-shadow: rgba(0,0,0,.2) 5px 5px 2px; } 

Die Problem: Wenn der Block <a> beim Hover um 5 Pixel vom Cursor wegspringt, bewegt sich der Cursor nicht mehr über den Block und der Block springt zurück, wenn der Cursor danach nur geringfügig bewegt wird.

Wie kann ich den ursprünglichen Hover-Bereich beibehalten, damit das Element nicht vor und zurück springt, wenn der Cursor nur leicht bewegt wird?

Ich möchte es vermeiden, überflüssige Containerelemente zu meinem Code hinzuzufügen, wenn es überhaupt möglich ist.

Answer 1

Eine Möglichkeit, dies zu erreichen, ist die Verwendung eines überflüssigen Elements (ein transparentes Bild oder ein Elternteil div großer Größe). Wenn der Benutzer den Mauszeiger über das Bild bewegt, werden Sie mithilfe eines Unterverzeichnisses für Nachkommen/Untergeordnete aufgefordert, die untergeordneten Elemente zu "springen". Dies ist möglicherweise nur mit den neuesten Browsern möglich. Wenn Sie auf Cross-Browser-Kompatibilität schauen, kann die Verwendung von Javascript der richtige Ansatz sein.

Answer 2

Sie können CSS3 Verzögerung zunichte machen dieses Problem

a { 
display: block; 
position: relative; 
width:40px; 
height:30px; 
} 

a:hover { 
top: -5px; left: -5px; 
box-shadow: rgba(0,0,0,.2) 5px 5px 2px; 
-webkit-transition-duration: .2s; 
} 

Answer 3

Haben Sie tray Wechselposition Eigenschaft? behoben zum Beispiel:

a:hover { 
position: fixed; 
}