Texte en rollover

body {
background-color: #f7d8fc;
font-family: "times new roman", arial, times, serif;
font-style: italic;
}

#unite
{
position:absolute;
left:50%;
margin-left:-490px;
width: 980px;
top:50%;
margin-top:-271px;
height: 542px;
background-image : url("images/fond_index.jpg");
background-repeat: no-repeat;
border :2px solid black;
}


a {
        color: #b04cbf;
		font-family: Anke Calligraphic, Times New Roman, Times, serif;
		font-weight: bold;
		font-size: 15px;
		text-decoration: none;
		text-align: center;
} 

a :hover {
        color: #e365f6;
		font-family: Anke Calligraphic, Times New Roman, Times, serif;
		font-weight: bold;
		font-size: 15px;
		text-decoration: none;
		text-align: center;
} 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>index</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="index.css" />

</head>
 
   <body>

 
       <div id="unite">        
           
           <a href="mariage.php">Mariage</a> 
		    <img src="images/fleur_menu_index.jpg"> 
		  
		  <a href="naissance.php">Naissance</a> 
		    <img src="images/fleur_menu_index.jpg"> 
		   
		   <a href="temoignages.php">Témoignages</a> 
		    <img src="images/fleur_menu_index.jpg"> 
		   
		   <a href="partenaire.php">Partenaires</a> 
		    <img src="images/fleur_menu_index.jpg"> 
		   
		   <a href="divers.php">Divers</a> 
		    <img src="images/fleur_menu_index.jpg"> 
		   
		   <a href="contact.php">Contact</a> 
          
           </div>
           
       </div>        
   </body>
</html>