Visualizzazione risultati 1 fino 5 di 5

Discussione: Link padre non prende pseudo classe hover

  1. #1
    albenessereblog non è connesso Utente attivo
    Data registrazione
    29-12-2021
    Messaggi
    326

    Predefinito Link padre non prende pseudo classe hover

    Questo è il sito: https://albertifoto.altervista.org

    Nel menù a sinistra c'è il link Henry Cartier-Bresson e sotto il link figlio "...mentre scatta".
    Se do il focus al link figlio, il link padre non prende più l'hover.

    Questo è tutto il css:

    Codice HTML:
    /* Link del menù */
    .home-menu,
    .main-navigation a,
    .widget ul li a,
    .main-navigation ul li.current-menu-ancestor > a {
    	color: #0083cd;
    }
    .home-menu:hover,
    .main-navigation a:hover,
    .widget ul li a:hover,
    .widget_tag_cloud a:hover {color: #ff0000;}
    
    /* Link focus del menù */
    .main-navigation ul li.current-menu-item > a {
    	color: #ff6600;
    	font-weight: 400;
    }
    
    /* Mette il simbolo al sottomenù "...mentre scatta" */
    .main-navigation ul li ul li:before {
    	font-size: 1.2em;
    	color: #ccc;
    	content: '\0021b3';
    	left: 0;
    	position: absolute;
    	top: 4px;
    }
    .main-navigation ul li ul li {
    	border-left: 0;	
    	padding-left: 21px;
    }
    Ultima modifica di albenessereblog : 09-04-2023 alle ore 20.06.55

  2. #2
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,252

    Predefinito

    Succede perché la regola che assegna il blu
    Codice:
    .main-navigation ul li.current-menu-ancestor > a {
        color: #0083cd;
    }
    ha una specificità più alta della regola del rosso
    Codice:
    .home-menu:hover,
    .main-navigation a:hover,  /* <--- questa probabilmente */
    .widget ul li a:hover,
    .widget_tag_cloud a:hover {
        color: #ff0000;
    }
    Vedi
    https://developer.mozilla.org/en-US/...SS/Specificity
    https://developer.mozilla.org/en-US/...nd_inheritance

  3. #3
    albenessereblog non è connesso Utente attivo
    Data registrazione
    29-12-2021
    Messaggi
    326

    Predefinito

    Citazione Originalmente inviato da dreadnaut Visualizza messaggio
    Succede perché la regola che assegna il blu
    Codice:
    .main-navigation ul li.current-menu-ancestor > a {
        color: #0083cd;
    }
    ha una specificità più alta della regola del rosso
    Codice:
    .home-menu:hover,
    .main-navigation a:hover,  /* <--- questa probabilmente */
    .widget ul li a:hover,
    .widget_tag_cloud a:hover {
        color: #ff0000;
    }
    Vedi
    https://developer.mozilla.org/en-US/...SS/Specificity
    https://developer.mozilla.org/en-US/...nd_inheritance
    Ho risolto mettendo !important

    Codice HTML:
    .home-menu:hover,
    .main-navigation a:hover,
    .widget ul li a:hover,
    .widget_tag_cloud a:hover {
    	color: #ff0000 !important;
    }

  4. #4
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,252

    Predefinito

    Per essere pignoli, hai aggirato il problema usando !important Il rischio è che forzando la mano in questo modo saltino fuori altri problemi.

    A naso, potresti invece eliminare la regola dal blu, cambiando
    Codice:
    .home-menu,
    .main-navigation a,
    .widget ul li a,
    .main-navigation ul li.current-menu-ancestor > a {
    	color: #0083cd;
    }
    in
    Codice:
    .home-menu,
    .main-navigation a,
    .widget ul li a {
    	color: #0083cd;
    }
    Vedi tu però se fa quello che ti serve.

  5. #5
    albenessereblog non è connesso Utente attivo
    Data registrazione
    29-12-2021
    Messaggi
    326

    Predefinito

    Citazione Originalmente inviato da dreadnaut Visualizza messaggio
    Per essere pignoli, hai aggirato il problema usando !important Il rischio è che forzando la mano in questo modo saltino fuori altri problemi.

    A naso, potresti invece eliminare la regola dal blu, cambiando
    Codice:
    .home-menu,
    .main-navigation a,
    .widget ul li a,
    .main-navigation ul li.current-menu-ancestor > a {
    	color: #0083cd;
    }
    in
    Codice:
    .home-menu,
    .main-navigation a,
    .widget ul li a {
    	color: #0083cd;
    }
    Vedi tu però se fa quello che ti serve.
    Ho tolto !important e ho messo da così a così e funziona, ma con !important non mi dava problemi.

    Codice HTML:
    .home-menu:hover,
    .main-navigation a:hover,
    .widget ul li a:hover,
    .widget_tag_cloud a:hover {
         color: #ff0000 !important;
    }
    
    .home-menu:hover,
    .main-navigation a:hover,
    .widget ul li a:hover,
    .widget_tag_cloud a:hover,
    .main-navigation ul li.current-menu-ancestor > a:hover {
    	color: #ff0000;
    }

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •