Visualizzazione dei risultati da 1 a 3 su 3

Discussione: Problema hover in css

  1. #1

    Problema hover in css

    Salve a tutti sono nuovo quindi scusatemi in partenza.Vorrei sapere
    come si puo' usare hover con due id diversi ma che fanno la stessa
    cosa,ovvero

    codice:
    #box1{ border: 2px solid black; padding: 2em; border-radius: 1em;width: 28em;}
    #box1:hover {color:red; background-color: yellow;}
    #box2:hover {color:red; background-color: yellow;}
    #box2{width: 35em;border: 4px solid black;padding: 2em;border-radius: 1em}
    #box2:active{ color: blue; background-color: red;}
    #box1:active{ color: blue; background-color: red;}
    visto che voglio che tutti e due i box abbiano la stessa azione sia
    con hover che active come posso scrivere una sola linea?
    tipo
    codice:
    #box1,#box2:hover{color:red; background-color: yellow;}
    ovviamente e' sbagliata perche' cosi' hover si applica solo a box2
    quindi come potrei scriverla,se si puo'?Scusate per la domanda sicuramente semplice per voi ma sono agli inizi.
    Vi ringrazio
    Saluti
    Ultima modifica di carlomarangoni; 12-02-2017 a 17:04

  2. #2
    La sintassi corretta è:

    codice:
    #box1:hover,#box2:hover{color:red; background-color: yellow;}
    Come alternativa potresti aggiungere una classe sia a box1 che a box2

    codice:
    <div id="box1" class="box">
    <div id="box2" class="box">
    e il css diventerebbe:

    codice:
    .box:hover{color:red; background-color: yellow;}

  3. #3
    @emanuele112
    Quando posti del codice usa il tag [ code] oppure l'opzione "#" dalla modalità avanzata.
    Solo per questa volta te lo faccio io
    Ultima modifica di carlomarangoni; 12-02-2017 a 17:05
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.