Change color for any element on page - css

Question

How do I achieve something like this:
*:hover{
background-color:lightblue;
}
I am trying to change background color of any element on the page when hovering on the element. Not sure why it doesnt work.

Answer 1

It works fine http://jsfiddle.net/mendesjuan/9pta8vbz/
The problem is that it's highlighting the entire body since the mouse is over the body, so you don't see highlighting on children any differently.
The following example should clarify it http://jsfiddle.net/mendesjuan/9pta8vbz/1/ It will highlight items inside the body
CSS
body *:hover{
background-color:lightblue;
}
HTML
<p>1 <span>inside</span></p><p>2</p><p>3</p>
It will highlight the paragraphs, but the span will behave the same way since the paragraph will also be highlighted
What you are doing cannot be done with CSS alone, you can use JS to add a CSS class to the element that the mouse is over http://jsfiddle.net/mendesjuan/9pta8vbz/2/
CSS
.highlight {
background-color:lightblue;
}
JavaScript
// This is a simplified version that doesn't take care of edge cases
// known bugs: should use addEventListener, should not wipe out existing `className`,
// e.target is not 100% cross browser, but those are other topics
document.onmouseover = function(e) {
e.target.className = 'highlight';
}
document.onmouseout = function(e) {
e.target.className = '';
}