Hover-issues with tabs

Hover-issues with tabs

Hey!

First of all, I am quite new to jQuery and Javascript, so please help me understand how to fix this issue.

I am using tabs on a new site that I am developing, and used this tutorial to get started with it.
One of the changes I made to the jQuery-script, was to change from click to hover on the tabs.

I made the tabs using jQuery 1.3.2 and jQuery UI 1.5.3. I was happy with the result, and it worked as expected.
But, later I changed to jQuery 1.4.2 and jQuery UI 1.8.1, and the behavior of the hover-function was changed a lot.

As you can see from the example I have put up here, the hover-function is loading the content both when I mouseover and mouseout, witch is quite annoying. Click to see the example

The code I am currently are using is the following.
  1. //ITpro SmartBar (tabs)
  2. $(document).ready(function() {
  3. $(".smartbar-content").hide();
  4. $("ul.smartbar li:first").addClass("selected").show(); //Activate first tab
  5. $(".smartbar-content:first").show(); //Show first tab content
  7. $("ul.smartbar li").hover(function() {

  8. $("ul.smartbar li").removeClass("selected");

  9. $(this).addClass("selected"); //Add "selected"-class to activate the selected tab
  10. $(".smartbar-content").hide(); //Hide all tab content
  11. var activeTab = $(this).find("a").attr("rel");
  12. if ($.browser.msie)
  13. {$(activeTab).show();}
  14. else
    {$(activeTab).fadeIn();}

  15. return false;
  16. });
  17. });
I tried to read a bit on http://jqueryui.com/demos/tabs/#mouseover - but since the code is so different I don't really know where to start.
Could somebody point me to the right direction, or help me re-write the code?
The important elements is the hover-event and the fadeIn.

Thanks for replies!