title: making background opague on hover with css, css3 or jquery
body: <p>What I am trying to achieve is to make the background of the whole page opaque, when I hover on an href. Something that when hovered that will trigger the body class to have a coloured background with opacity. Something like this below, however this does not work. I can only make it work within its contained div. </p>
  
  <p>Is there is an easier method with css, or css3. It has to be a light weight method to achieve this. I am also wanting to place an image at the centre of the page. However this functionality is more important for the moment.</p>
  
  <pre><code> $(function(){
  $('a body').hover(function() { 
  $('a', this).stop().animate({"opacity": 1}); 
   },function() { 
  $('a', this).stop().animate({"opacity": 0.4}); 
  });
  </code></pre>