[HTML] Effetto hover in un div

[smanimania]

Ciao a tutti, sto creando un tema con Bootstrap 3 e voglio creare un effetto hover mouse su un div.
L'effetto è un bordo intorno a tutto il div, attualmente il bordo che appare ha dei margini laterali.
Grazie mille in anticipo

Vi aggiungo i codici HTML e CSS:

Codice HTML:

<!-- prodotto -->
 <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 box">
     <img class="img-center img-responsive" src="img/prodotto-test.jpg">
          <p class="titolo-prodotto text-center ">Titolo Prodotto</p>

                <span class="prezzo-prodotto-barrato"><s>20</s></span>
                <span class="prezzo-prodotto altezza-30">Prezzo</span>
                </div>

                  <div class="row">
                    <div class="col-md-4">
                    <span href="#" class="hidden-xs hidden-sm btn btn-primary"><img src="img/icone/wishlist.png"></a>
                        
                    </div>
                    <div class="col-md-8">
                    
                        <a href="#" class=" hidden-xs hidden-sm btn btn-default">
                            <div class="col-md-6">
                            <img class="hidden-xs hidden-sm icona-carrello" src="img/icone/carrello.png">
                            </div>
                          
                              
                                <div class="col-md-6 text-left testo-aggiungi-carrello">
                                    Aggiungi
                                    <div class="hidden-xs hidden-sm altezza-3"></div>
                                    al Carrello
                              </div>
                            
                        </a>

                          <div class="altezza-20"></div>
                    </div>
           </div>
 </div> <!-- / col-md-3 -->
            
<!-- / prodotto -->

Codice CSS:

    .box: {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border: 1px solid #ff6600;
    background: #ffffff;
    width: 255px;
    height: 320px;

    }

    .box:hover {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border: 2px solid #ff6f00;
    background: #ffffff;

    }

 

[Max 1]

Ciao
A me sembra che con il ruo codice l'effetto hover funzioni bene! Cosa significa margini laterali?
Forse è utile che ti spieghi meglio e più dettagliatamente
PS.
Quando posti del codice usa il tag [ code ] o l'opzione nella barra degli strumenti! Vedi immagine

per questa volta te lo correggo io
ciao

 

[smanimania]

Ciao Max 1 grazie mille per la risposta e per la correzione
ti allego uno screen shot del mio div così da comprendere meglio il problema

 

[Max 1]

In sostanza tu vuoi che con over il bordo sia 255x320?
Se è così basta che tu aggiungi

    width: 255px;
    height: 320px;

a .box:hover

 

[smanimania]

Purtroppo non mi funziona comunque.. quali sono le alternative? le sto provando tutte
Grazie mille per la disponibilità

 

[Max 1]

Purtroppo non mi funziona comunque.. quali sono le alternative? le sto provando tutte
Grazie mille per la disponibilità

Alternative non saprei proprio perchè com i css dovresti risolvere i problemi che ti confesso non ho ancora molto capito
Con il codice modificato il bordo con hover funziona e il div ha una dimensione di 255x320 e non ho capito cosa deve avere di più.
Comunque aspettiamo uno più sveglio di me

 

[smanimania]

Ciao Max, allora iniziato da zero il progetto, seguendo passo passo la sintassi di Bootstrap e tutto funziona correttamente, il problema era legato all'utilizzo di un div superfluo che mi sfalzava i box.

Ho assegnato al div la classe "box" e da CSS:

.box: {
width: 255px;
height: 320px;
}

.box:hover {
border: 1px solid #ff6600;
}

Aggiungo la risposta spero possa tornare utile ad altri utenti