CSS Impact on Mouseover Performance

by davidtong

HTML

<ul class="basic">
    <li><div class="media"><div class="icon"></div><h3>title here</h3><p>item description <a href="#">here</a></p><div class="action">process</div></div></li>
    <li><div class="media"><div class="icon"></div><h3>title here</h3><p>item description <a href="#">here</a></p><div class="action">process</div></div></li>
    <li><div class="media"><div class="icon"></div><h3>title here</h3><p>item description <a href="#">here</a></p><div class="action">process</div></div></li>
    <li><div class="media"><div class="icon"></div><h3>title here</h3><p>item description <a href="#">here</a></p><div class="action">process</div></div></li>
    <li><div class="media"><div class="icon"></div><h3>title here</h3><p>item description <a href="#">here</a></p><div class="action">process</div></div></li>
    <li><div class="media"><div class="icon"></div><h3>title here</h3><p>item description <a href="#">here</a></p><div class="action">process</div></div></li>
    <li><div class="media"><div class="icon"></div><h3>title here</h3><p>item description <a href="#">here</a></p><div class="action">process</div></div></li>
    <li><div class="media"><div class="icon"></div><h3>title here</h3><p>item description <a href="#">here</a></p><div class="action">process</div></div></li>
    <li><div class="media"><div class="icon"></div><h3>title here</h3><p>item description <a href="#">here</a></p><div class="action">process</div></div></li>
    <li><div class="media"><div class="icon"></div><h3>title here</h3><p>item description <a href="#">here</a></p><div class="action">process</div></div></li>
    <li><div class="media"><div class="icon"></div><h3>title here</h3><p>item description <a href="#">here</a></p><div class="action">process</div></div></li>
</ul>

CSS

.basic li {background: #bbffbb; margin-top: 2px; position: relative; height: 40px; display: block;}
.basic .icon {float: left; background: pink; width: 10px; height: 10px;}
.basic h3 {font-size: 14px;}
.basic p {font-size: 12px; display: inline-block; *display: inline; *zoom: 1;}
.basic .action {position: absolute; bottom: 0px; right: 5px;}
.basic li.hover {background: #ffbbbb;}
.basic > li a:hover {color: black;}

JavaScript

$('ul').delegate('li','mouseover',function(e){$(this).addClass('hover');});
$('ul').delegate('li','mouseout',function(e){$(this).removeClass('hover');});