change font and background colour of the element when i hover on it with the mouse cursor

how I can change the colour of font and background colour of the element when I hover on it with the mouse cursor 

<div class="main-menu">
  <a href="#">Log In</a>
  <a href="#" class="active">Register</a>
  <a href="#">About</a>
  <a href="#">Language</a>
</div>

<style> .main-menu a:hover { background-color: #eee; color: #00B200; } </style>