RoiEX RoiEX - 7 months ago 35
HTML Question

Change Sorted List Background color

I am currently woking on a small navigation in HTML using CSS.
I have a sorted List with every li element Containing a link.
I want it to change the background color, when hovering over it. The problem is, that the number telling you the index of the list item won't get changed because "this" background is not part of the li element. Example

ProblemDesc

The ol element, which "owns" this background is the whole list, but I just want that the background of this specific list entry gets changed.

My code is:

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


and

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


The navig class is used to make clear that the link belongs to the navigation.

Is there a way to fix this without JScript, or belongs this to the missing "CSS support for parent selecting" thing?

Answer

Use list-style-position: inside; to move the numbers / bullet into the li element:

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>
	<li>
		<a href="https://www.google.co.il/search?q=coffee">Coffee</a>
	</li>
	<li>
		<a href="https://www.google.co.il/search?q=tea">Tea</a>
	</li>
	<li>
		<a href="https://www.google.co.il/webhp?q=coca+cola">Coca Cola<a>
	</li>
</ol>

Comments