Using mouseover to switch tabs

HTML

<!-- tabs -->

  <div id="products">

  <img src="google.jpg" alt="Google" title="Google" />

  <img src="yahoo.jpg" alt="Yahoo!" title="Yahoo!" />

  <img src="microsoft.jpg" alt="Microsoft" title="Microsoft" />

  </div>

<!-- panes -->

    <div class="description" id="free">

  <div class="arrow">&nbsp;</div>

  

  <h3>Company Overview</h3>

  

  <p>

    Founders Larry Page and Sergey Brin named the search engine they built "Google," a play on the word "googol," the mathematical term for a 1 followed by 100 zeros. The name reflects the immense 

  </p>



  <p align="right"><a href="http://www.google.com/corporate/" target="_blank">More Info</a></p>

  </div>

<div class="description" id="commercial">

  <div class="arrow"></div>

  

  <h3>Company Overview</h3>

  

  <p>Founded in 1994 by Stanford Ph.D. students David Filo and Jerry Yang, Yahoo! began as a hobby and has evolved into a leading global brand that changed the way people communicate with each other

  </p>

  

  <p align="right"><a href="http://yhoo.client.shareholder.com/press/overview.cfm" target="_blank">More Info</a></p>

  </div>

<div class="description" id="multidomain">

  <div class="arrow"></div>

  

  <h3>Company Overview</h3>

  

  <p>

    Learn about Microsoft's business units and Board of Directors, get contact information, locate a sales office, find out how to participate in the Microsoft Vendor Program, or view our latest advertisements.

  </p>

  

  <p align="right"><a href="http://www.microsoft.com/about/companyinformation/en/us/default.aspx" target="_blank">More Info</a></p>

  

  </div>

CSS

    :focus {

    -moz-outline-style:none;

    }

  
  #products img {

    margin:0 20px 10px 0; 

    cursor:pointer; 

    }
  .description {

    background-color:#e1e1e1;

    border:1px solid #999; 

    width:450px;

    min-height:140px;

    display:none;

    margin-top:17px;

    -moz-border-radius:4px;

    padding:0 20px;

    }
  .description .arrow {

    width:34px;

    height:34px;

    background:transparent url(gray.png) repeat scroll 0 -68px;

    margin-top:-28px;

    margin-left:36px;

    font-size:1px;

    position:relative;

    }
  #commercial .arrow {

    margin-left:210px; 

    }
  #multidomain .arrow {

    margin-left:385px; 

    }
    

Javascript

$(function() {
$("#products").tabs("div.description", {event:'mouseover'});
});

View Example