demonstration of hover

Original: http://jsfiddle.net/FwKqq/6/

by Jens Grochtdreis

HTML

<div>
    <div>
        <table>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
        </table>
    </div>
</div>

<p></p>

<p></p>

CSS

* { 
    background-color: white;
    border: 1px solid #000;
    min-height: 10px;
    min-width: 50px;
    padding: 10px;
    margin: 10px;
}

:hover {
    cursor: pointer;
    -webkit-animation: bg 2s infinite alternate;
    -moz-animation: bg 2s infinite alternate;
    -ms-animation: bg 2s infinite alternate;
    -o-animation: bg 2s infinite alternate;
    animation: bg 2s infinite alternate;
}

html::before, body::before, div::before, table::before, 
tr::before, td::before, p::before {
    display: block;
}

html::before { content: "html" }
body::before { content: "body" }
div::before { content: "div"  }
table::before { content: "table" }
td::before { content: "td" }
p::before { content: "p" }

html:hover::before { content: "html: hovered" }
body:hover::before { content: "body: hovered" }
div:hover::before { content: "div: hovered"  }
table:hover::before { content: "table: hovered" }
td:hover::before { content: "td: hovered" }
p:hover::before { content: "p: hovered" }

@-webkit-keyframes bg { 0% { background: pink } 100% { background: red } }
@-moz-keyframes bg { 0% { background: pink } 100% { background: red } }
@-ms-keyframes bg { 0% { background: pink } 100% { background: red } }
@-o-keyframes bg { 0% { background: pink } 100% { background: red } }
@keyframes bg { 0% { background: pink } 100% { background: red } }