In order to achieve the desired effect of making the background of the whole page opaque when hovering over a hyperlink, I am seeking a solution that will trigger the body class to have a colored background with opacity. The code provided below does not work as intended, only affecting its contained div.
Is there a simpler method using CSS or CSS3 to accomplish this? It needs to be a lightweight solution. While my main priority is achieving this effect, I also plan to add an image in the center of the page at a later time.
$(function(){
$('a body').hover(function() {
$('a', this).stop().animate({"opacity": 1});
},function() {
$('a', this).stop().animate({"opacity": 0.4});
});