Aggiungere un bordo CSS al passaggio del mouse senza spostare l'elemento

Eventuali duplicati:
CSS hover border makes inline elements adjust slightly Aggiungere un bordo CSS al passaggio del mouse senza spostare l'elemento

ho una riga che Mi candido un punto culminante di fondo per il passaggio del mouse.

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

Tuttavia, come il bordo aggiunge 1 pixel ulteriore all'elemento, lo rende 'mossa'. Come posso compensare il movimento qui sopra qui (senza usare un'immagine di sfondo)?

fonte

2012-03-08 David542

Il vostro elemento ha un'altezza definita? In tal caso, puoi 1) usare 'dimensionamento scatola: border-box' (con i prefissi necessari) per i browser moderni, oppure 2) imbrogliare aggiungendo un bordo dello stesso colore dello sfondo predefinito e radere 1 pixel all'altezza specificata . – BoltClock

vedi la mia risposta qui sotto e fammi sapere se sono in ritardo qui, quindi posso capire il tuo problema in modo più specifico. – w3uiguru

188

È possibile rendere trasparente il bordo. In questo modo esiste, ma è invisibile, in modo da non spingere nulla intorno:

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

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

Se gli elementi hanno un determinato height e/o width, è anche possibile utilizzare box-sizing:border-box;, come questo modello di dialogo include imbottitura e il bordo larghezze nella dimensione calcolata, esempio:

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

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

fonte

2012-03-08 04:12:32 Duopixel

chiunque ha visto un modo per risolvere questo problema usando l'attributo CSS 'dimensionamento della casella: border-box;'? – tim

@tim yes, funziona con 'dimensionamento della casella: border-box;' anche. – Duopixel

Semplice e funziona. Grazie! A volte la risposta ovvia non è così ovvia fino a quando non ti colpisce in faccia. – SeanKendle

Aggiungere un border all'elemento regolare, lo stesso color come background, in modo che non possa essere visto. In questo modo l'articolo ha un border: 1px se è stazionario o meno.

fonte

2012-03-08 04:11:50 danapaige

aggiungere margin:-1px; che riduce 1px ad ogni lato. o se hai bisogno solo per il lato puoi fare margin-left:-1px ecc.

fonte

2012-03-08 04:12:51 Dips

Questa è stata la soluzione migliore per me perché, nel mio caso, ho impostato un bordo 1px sull'elemento originale e voglio ottenere, al passaggio del mouse, un bordo più spesso (3px). Usando 'margin: -2px;' funziona davvero. –

In effetti la soluzione migliore quando lo spessore del bordo cambia da uno stato all'altro. –

mi ha salvato tempo :) grazie – medBo

Prova questo potrebbe risolvere il tuo problema.

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 violino per l'uscita: http://jsfiddle.net/dLDNA/

fonte

2012-03-08 04:19:04 w3uiguru

ecco la nuova: http://jsfiddle.net/fbfjw/3/embedded/result/ – Jack

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

Aggiungere un bordo CSS al passaggio del mouse senza spostare l'elemento

risposta

Problemi correlati