CSS Cursor：Pointer不适用于js函数

Question

I wrote a simple tabs module using bootstrap. Here is my code

<ul id="tabs" class="nav nav-tabs subentry-nav" data-tabs="tabs">
    <li><a href="#red" data-toggle="tab"><h4>Red</h4></a></li>
    <li><a href="#orange" data-toggle="tab"><h4>Orange</h4></a></li>
    <li><a href="#yellow" data-toggle="tab"><h4>Yellow</h4></a></li>
    <li><a href="#green" data-toggle="tab"><h4>Green</h4></a></li>
</ul>

I declared a css style to make the cursor pointer on it.

.subentry-nav.nav>li {
    cursor:pointer;
}

It looks fine at this stage.

Then I tried to make the tab switch on hover instead of on click, so I added this piece of js function:

$('.nav-tabs > li').hover(function(){
    if($(this).hasClass('hoverblock'))
        return;
    else
        $(this).find('a').tab('show');
})

$('.nav-tabs > li').find('a').click(function(){
    $(this).parent().addClass('hoverblock');
})

After adding this piece of code, the cursor attribute won't work anymore. Any idea where I did wrong?

Answer 1

It get's overriden by other bootstrap classes which have:

.nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus{
    cursor:default;    
}

One solution whould be to change

.subentry-nav.nav>li {
    cursor:pointer;
}

with

.nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus{
    cursor:pointer;    
}