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;
}

---

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

Citazione:

---

Originalmente inviato da dreadnaut

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;
}

---

Per essere pignoli, hai aggirato il problema usando !important :mrgreen: 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.

Citazione:

---

Originalmente inviato da dreadnaut

Per essere pignoli, hai aggirato il problema usando !important :mrgreen: 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;
}

---