JQuery Tab переключатель на событие Hover вместо Click

Question

У меня есть простой переключатель табуляции, сейчас вы нажимаете на вкладку, чтобы переключить ее, но я бы хотел вместо нее переключить ее на наведение.

Ниже приведен код, и JSFiddle показывает его вдействие прямо сейчас с событием клика http://jsfiddle.net/jasondavis/p95nJ/

jQuery(document).ready(function($) {

    //tabs
     $("ul.tabrow li:first").addClass("active").show(); //Activate first tab
    $(".tab-content div:first").show(); //Show first tab content
    //On Click Event
    $("ul.tabrow li").click(function() {
        $("ul.tabrow li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab-box").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });

});

Если вы можете помочь, я был бы очень признателен.Я НЕ хочу использовать jQueryUI

HTML

<div class="tab-wrap">
    <ul class="tabrow">
        <li class=""><a href="#tab_tags">Tags</a></li>
        <li class=""><a href="#tab_recent">Recent Articles</a></li>
        <li class="active"><a href="#tab_tools">Tools</a></li>
    </ul>


    <div class="tab-content">
        <div id="tab_tags" class="tab-box" style="display: none; ">
            <div class="taglist">
                <ul id="tag-list">
                    <li><a href="/tag/php/" title="View all 1 posts filed under PHP">PHP</a></li>
                    <li><a href="/tag/personal/" title="View all 1 posts filed under Personal">Personal</a></li>
                    <li><a href="/tag/wordpress/" title="View all 1 posts filed under Wordpress">Wordpress</a></li>
                </ul>
            </div>
            <div class="clear">
            </div>
            <a href="http://www.codedevelopr.com/archives/" id="tag-to-archive">View All Tags →</a>
        </div>


        <div id="tab_recent" class="tab-box" style="display: none; ">
            <ul>
                <li class="widget"><a href="/wordpress-custom-editor-quicktag-buttons/" title="WordPress Custom Editor Quicktag Buttons">WordPress Custom Editor Quicktag Buttons</a></li>
                <li class="widget"><a href="/welcome/" title="Welcome to CodeDevelopr">Welcome to CodeDevelopr</a></li>
            </ul>
        </div>


        <div id="tab_tools" class="tab-box" style="display: block; ">
            Coming Soon. In the mean time subscribe to the <a href="http://feeds.feedburner.com/codedevelopr">RSS Feed</a>
        </div>
    </div>
</div>

Answer 1

Вы должны использовать .hover метод. Смотри http://jsfiddle.net/p95nJ/1/

$("ul.tabrow li").hover(function() {
       $(this).addClass("active"); //Add "active" class to selected tab
       var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
       $(activeTab).fadeIn(); //Fade in the active content
       return false;
   }, function() {
       $("ul.tabrow li").removeClass("active"); //Remove any "active" class
       $(".tab-box").hide(); //Hide all tab content
       return false;
   });

Answer 2

Изменение

$("ul.tabrow li").click(function() {})

до

$("ul.tabrow li").hover(function() {})

Answer 3

$("ul.tabrow li").hover(function() { $(this).find("a").click();});