/ / Element z dopełnieniem poruszającym się po najechaniu kursorem - css

Element z wyściółką poruszającą się na zawisie - css

mam a element. Po najechaniu dodaję obrys konturu i obrysu oraz dodatkowe obicie. Problem polega na tym, że element porusza się po najechaniu myszą.

html

<a href="javascript:void(0)" class="link">test</a>

css

.link {
display: inline-block;
//  margin: 1px 1px;
}

.link:hover {
outline: 0.125rem dotted red;
color: black;
outline-offset: -1px;
padding: 1px 1px;
//  margin: 0;
}

http://jsfiddle.net/5pbk9djp/116/

Dwa sposoby, które znalazłem to:

  1. margines na stanie normalnym równy dopełnieniu po najechaniu kursorem, a następnie margines 0 po najechaniu kursorem myszy
  2. dopełnienie jest w normalnym stanie, a nie na zawisie

Zdecydowanie nie podoba mi się pierwszy scenariusz. Jeśli nie mam innego wyboru, pójdę na drugi.

Jakieś pomysły na coś innego?

Odpowiedzi:

1 dla odpowiedzi № 1

Wypełnienie w normalnym stanie jest w porządku, ale alternatywnym sposobem jest użycie ujemnego translateX i translateY, np.

.link:hover {
...
padding: 1px 1px;
-webkit-transform: translate(-1px, -1px);
-moz-transform: translate(-1px, -1px);
-o-transform: translate(-1px, -1px);
transform: translate(-1px, -1px);
}

Transformacja 2d to dobrze wspierany (nawet z IE9)

Przykład: http://jsfiddle.net/5pbk9djp/117/


0 dla odpowiedzi nr 2

z tym nie dbasz o kompatybilność przeglądarki, wszystkie prefiksy -moz, -webkit ... nie są potrzebne

.link {
display: inline-block;
}

.link:hover {
outline: 0.125rem dotted red;
color: black;
outline-offset: -1px;
padding: 1px 1px;
position: relative;
top: -1px;
left: -1px;
}

przykład: https://jsfiddle.net/b7s4d89x/