[HTML] Effetto hover in un div

Discussione in 'HTML e CSS' iniziata da smanimania, 10 Gennaio 2017.

Tag (etichette):
  1. smanimania

    smanimania Nuovo Utente

    Registrato:
    10 Gennaio 2017
    Messaggi:
    17
    Mi Piace Ricevuti:
    2
    Punteggio:
    3
    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:
    Codice:
    <!-- 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:

    Codice:
        .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;
    
        }
    
     
    Ultima modifica di un moderatore: 10 Gennaio 2017
  2. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    2.277
    Mi Piace Ricevuti:
    172
    Punteggio:
    63
    Sesso:
    Maschio
    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
    box inserisci 2.png.JPG
    per questa volta te lo correggo io
    ciao ciao.gif
     
  3. smanimania

    smanimania Nuovo Utente

    Registrato:
    10 Gennaio 2017
    Messaggi:
    17
    Mi Piace Ricevuti:
    2
    Punteggio:
    3
    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

    [​IMG]
     
  4. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    2.277
    Mi Piace Ricevuti:
    172
    Punteggio:
    63
    Sesso:
    Maschio
    In sostanza tu vuoi che con over il bordo sia 255x320?
    Se è così basta che tu aggiungi
    Codice:
        width: 255px;
        height: 320px;
    a .box:hover
     
  5. smanimania

    smanimania Nuovo Utente

    Registrato:
    10 Gennaio 2017
    Messaggi:
    17
    Mi Piace Ricevuti:
    2
    Punteggio:
    3
    Purtroppo non mi funziona comunque.. quali sono le alternative? le sto provando tutte
    Grazie mille per la disponibilità
     
  6. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    2.277
    Mi Piace Ricevuti:
    172
    Punteggio:
    63
    Sesso:
    Maschio
    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
     
  7. smanimania

    smanimania Nuovo Utente

    Registrato:
    10 Gennaio 2017
    Messaggi:
    17
    Mi Piace Ricevuti:
    2
    Punteggio:
    3
    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:

    Codice:
    .box: {
    width: 255px;
    height: 320px;
    }
    
    .box:hover {
    border: 1px solid #ff6600;
    }

    Aggiungo la risposta spero possa tornare utile ad altri utenti :)
     
Sto caricando...

Condividi questa Pagina