Dodaj obramowanie CSS przy aktywowaniu bez przesuwania elementu

Powiel możliwe:
CSS hover border makes inline elements adjust slightly Dodaj obramowanie CSS przy aktywowaniu bez przesuwania elementu

Mam wiersz, który ja mówię: w odniesieniu do podświetlenia tła, aby przy aktywowaniu.

.jobs .item:hover { 
    background: #e1e1e1; 
    border-top: 1px solid #d0d0d0; 
}

Jednak, jak dodaje obramowanie 1px dodatkowe do elementu, to sprawia, że 'ruch'. Jak mogę zrekompensować tutaj powyższy ruch (bez użycia obrazu tła)?

Źródło

2012-03-08 David542

Czy Twój elementem mają określoną wysokość? Jeśli tak, możesz 1) użyć 'box-sizing: border-box' (z niezbędnymi przedrostkami) dla nowoczesnych przeglądarek, lub 2) oszukiwać, dodając obramowanie w tym samym kolorze co tło domyślne i goląc 1 piksel z określonej wysokości . – BoltClock

zobacz moją odpowiedź poniżej i daj mi znać, jeśli jestem w tyle, aby lepiej zrozumieć problem. – w3uiguru

188

Możesz sprawić, że krawędź będzie przezroczysta. W ten sposób istnieje, ale jest niewidoczny, więc nie ma nic wokół pchania:

.jobs .item { 
    background: #eee; 
    border-top: 1px solid transparent; 
} 

.jobs .item:hover { 
    background: #e1e1e1; 
    border-top: 1px solid #d0d0d0; 
}

Jeśli elementy mają określoną height i/lub width, można również użyć box-sizing:border-box;, jak ten model box zawiera wyściółkę i granica szerokości do wielkości komputerowej, np

.jobs .item { 
    background: #eee; 
    height: 40px; 
    box-sizing: border-box; 
} 

.jobs .item:hover { 
    background: #e1e1e1; 
    border-top: 1px solid #d0d0d0; 
}

Źródło

2012-03-08 04:12:32 Duopixel

ktokolwiek widział sposób na rozwiązanie tego problemu za pomocą atrybutu CSS 'box-sizing: border-box;'? – tim

@tim tak, działa również z 'box-sizing: border-box;'. – Duopixel

Prosty i działa. Dzięki! Czasami oczywista odpowiedź nie jest tak oczywista, dopóki nie trafi w twarz. – SeanKendle

Dodaj border do zwykłego przedmiotu, tego samego color jako background, aby go nie było widać. W ten sposób element ma wartość border: 1px niezależnie od tego, czy jest on zawieszony, czy nie.

Źródło

2012-03-08 04:11:50 danapaige

dodać margin:-1px; co zmniejsza 1px z każdej strony. lub jeśli potrzebujesz tylko strony, możesz wykonać margin-left:-1px itd.

Źródło

2012-03-08 04:12:51 Dips

To było dla mnie najlepsze rozwiązanie, ponieważ w moim przypadku ustawiłem granicę 1px na element orignal i chcę na hover grubszą ramkę (3px). Używanie 'margin: -2px;' rzeczywiście działa. –

Rzeczywiście najlepsze rozwiązanie, gdy grubość granicy zmienia się z jednego stanu do drugiego. –

zaoszczędziłem mój czas :) dzięki – medBo

Wypróbuj to może rozwiązać Twój problem.

CSS:

.item{padding-top:1px;} 

.jobs .item:hover { 
    background: #e1e1e1; 
    border-top: 1px solid #d0d0d0; 
    padding-top:0; 
}

HTML:

<div class="jobs"> 
     <div class="item"> 
      content goes here 
     </div> 
</div>

See skrzypce na wyjściu: http://jsfiddle.net/dLDNA/

Źródło

2012-03-08 04:19:04 w3uiguru

tutaj jest nowy: http://jsfiddle.net/fbfjw/3/embedded/result/ – Jack

http://s21.postimg.org/q8n11ng6v/test_2.png – Jack

Dodaj obramowanie CSS przy aktywowaniu bez przesuwania elementu

Odpowiedz

Powiązane problemy