Sorted List ändern Hintergrundfarbe

Question

Ich arbeite gerade an einer kleinen Navigation in HTML mit CSS. Ich habe eine sortierte Liste mit jedem li-Element, das einen Link enthält. Ich möchte, dass die Hintergrundfarbe geändert wird, wenn ich darüber schwebe. Das Problem ist, dass die Nummer, die Ihnen den Index des Listenelements anzeigt, nicht geändert wird, weil "dieser" Hintergrund nicht Teil des Elements li ist. Example

Das ol-Element, das in diesem Hintergrund „besitzt“ ist die ganze Liste, aber ich will nur, dass der Hintergrund dieses spezifischen Listeneintrags geändert wird.
Mein Code ist:

.navig a:hover{ 
    background-color: #555; 
    color: white; 
} 

und

<ol> 
    <li> 
     <a href="target.php">target</a> 
    </li> 
</ol> 

Die navig Klasse deutlich zu machen, verwendet wird, dass der Link zur Navigation gehört.

Gibt es eine Möglichkeit, das ohne JScript zu beheben, oder gehört dies zu der fehlenden "CSS-Unterstützung für Elternauswahl"?

Answer 1

Verwenden list-style-position: inside; die Zahlen/Kugel in das li Element zu bewegen:

ol { 
 
    background: #ff9999; 
 
    padding: 0; 
 
    list-style-position: inside; 
 
} 
 
li { 
 
    padding: 5px; 
 
} 
 
li:hover { 
 
    background: #ffe5e5; 
 
} 
 
li > a { 
 
    display: block; 
 
    color: black; 
 
    text-decoration: none; 
 
}

<ol> 
 
\t <li> 
 
\t \t <a href="https://www.google.co.il/search?q=coffee">Coffee</a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href="https://www.google.co.il/search?q=tea">Tea</a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href="https://www.google.co.il/webhp?q=coca+cola">Coca Cola<a> 
 
\t </li> 
 
</ol>

Answer 2

Eine andere Lösung als here beschrieben wird Ihre Liste in eine DL/DT Liste konvertieren und erzeugen ausdrücklich die Zahlen mit einem CSS-Zähler.

.navig { 
 
    counter-reset: navig-counter; 
 
} 
 
.navig dt:hover { 
 
    background-color: #555; 
 
    color: white; 
 
} 
 
.navig dt:before { 
 
    content: counter(navig-counter); 
 
    counter-increment: navig-counter; 
 
    margin-right: 5px; 
 
}

<dl class="navig"> 
 
    <dt><a href="#">First item</a></dt> 
 
    <dt><a href="#">Second item</a></dt> 
 
    <dt><a href="#">Third item</a></dt> 
 
</dl>