HTML+TIME DIV Background Hover Color Change for Blogger

CSS Code Snippet
This section code should be inserted before the closing head tag.

<style type='text/css'> #tabs {padding:0; margin:25px 0 0 15px; list-style:none;} #tabs li {display:inline; padding:0; background:#f8f8f8; float:left; margin-right:35px; position:relative; text-align: left;} #tabs li#one {width:190px;} #tabs li#two {width:240px;} #tabs li#three {width:190px;} #tabs li b {display:block; background:transparent url(http://www.blogspotvision.info/css/html-plus-bg-color-change/tab_top.gif) no-repeat 0 0; padding:2px 0 0 5px; height:15px; font-size:0.9em; overflow:hidden;} #tabs li div {border:1px solid #888; border-width:0 1px 1px 1px; padding:20px 5px 5px 5px;} #tabs li h3 {padding:0; margin:0; font-family:georgia, serif; font-size:17px;} #tabs li p {font-family:verdana, serif; font-size:11px; line-height:1.5em;} #tabs li a {color:#000; text-decoration:none;} #tabs li a.inner-link {color:#c00; text-decoration:none;} #tabs li a.inner-link:hover {text-decoration:underline;} #tabs li#one:hover {background:#fef;} #tabs li#two:hover {background:#cff;} #tabs li#three:hover {background:#ffc;} </style>

HTML Code Snippet
This section code should be inserted where you want the output to appear.

<ul id="tabs"> <li id="one" class="time" begin="one.mouseenter" end="one.mouseleave" timeaction="class:backColorOne"> <b>Firefox</b> <div> <h3><a class="inner-link" href="http://www.mozilla.com/?from=sfx&uid=324648&t=552">Get Firefox with Google Toolbar </a></h3><p>The award-winning Web browser just got better. It's free and easy to use. Join the millions of people worldwide enjoying a better Web experience.<br /><a class="inner-link" href="http://www.mozilla.com/en-US/firefox/">Download Firefox - Free</a></p> <img src="http://www.blogspotvision.info/css/html-plus-bg-color-change/mozilla.gif" alt="Mozilla Firefox" title="Mozilla Firefox" /> </div> </li> <li id="two" class="time" begin="two.mouseenter" end="two.mouseleave" timeaction="class:backColorTwo"> <b>Opera</b> <div> <h3>Your life at your fingertips</h3><p>Try Speed Dial™ in Opera's newest Web browser, Opera 9.20. It makes the fastest even faster. <br /><a class="inner-link" href="http://www.opera.com/browser/?utm_source=opera-text-ad&utm_medium=banner&utm_campaign=myoperalinks">Download Opera for Windows</a></p> <img src="http://www.blogspotvision.info/css/html-plus-bg-color-change/opera.gif" alt="Opera for Windows" title="Opera for Windows" /> </div> </li> <li id="three" class="time" begin="three.mouseenter" end="three.mouseleave" timeaction="class:backColorThree"> <b>Explorer</b> <div> <h3>Get Internet Explorer 9 beta for your operating system</h3><p>Upgrade with confidence. Get downloads for Internet Explorer 9 beta, including recommended updates as they become available.<br /><a class="inner-link" href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer 9 beta Download</a></p> <img src="http://www.blogspotvision.info/css/html-plus-bg-color-change/ie7.gif" alt="Internet Explorer 9 beta" title="Internet Explorer 9 beta" /> </div> </li> </ul>