Hover przy linkach

Przepraszam, że ponownie pytam o hovery przy linkach, ale mam z tym problem.  Nadal nie do końca rozumiem jak to funkcjonuje. Uczę się ;)

Chciałbym, aby po najechaniu myszką na tekst „1. Wybierz ścieżkę” , który jest równocześnie linkiem, zmienił się kolor tekstu i liczby.

Poniżej odpowiedni fragment HTML i CSS i fotka.

<div id="Sciezka">
			<div class="punkty"> 
				<a href="index.html">
				<span class="numer" style="color: #000;">1.</span>
				<span class="opis" style="color: #000;"> Wybierz <br/>ścieżkę </span>
				</a>
			</div>
			<div class="punkty"> 
				<span class="numer" style="color: #c34f4f;">2.</span>
				<span class="opis" style="color: #c34f4f; font-weight: 700;"> Wybierz <br/>wydarzenie</span>
			</div>
			<div class="punkty"> 
				<span class="numer">3.</span>
				<span class="opis"> Wybierz <br/>datę i godzinę</span>
			</div>
			<div class="punkty"> 
				<span class="numer">4.</span>
				<span class="opis"> Wybierz <br/>rodzaj biletów</span>
			</div>		
			<div class="punkty" style="border: none;"> 
				<span class="numer">5.</span>
				<span class="opis"> Podsumowa-<br/>nie i płatność </span>
			</div>			
			<div class="clear:both"> </div>		
		</div>

body
{
	background-color: #3f494c; 
	color: black;
	margin: 0px;
	font-family: 'Lato', sans-serif;
	font-size: 20px;
}

a:link
{
	color: black;
	text-decoration: none;
}

a:visited
{
	color: black;
	text-decoration: none;
}


a:hover
{
	color: black;
	text-decoration: none;
}

/* to jest na samej górze */

#Sciezka
{
	
}

.punkty
{
	float: left;	
	color: grey;
	background-color: #d1d6d6;
	font-size: 20px;
	/*padding: 20px;*/
	box-sizing: border-box;
	width: 20%;
	border-right: 2px dashed grey;
	text-align:center;
	padding-bottom: 20px;
}


.numer
{
	font-size: 70px;
	display: inline-block;	
}

.opis
{
	display: inline-block;	
}

Przypuszczam, że dla „profesjonalistów” mój kod może być nieco dziwny…

Pozdrawiam

Czarek