Question

我使用bootstrap编写了一个简单的标签模块。这是我的代码

<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>

我声明了一种css样式，使光标指针就可以了。

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

在这个阶段看起来很好。

然后我试着让鼠标悬停而不是点击，所以我添加了这段js功能：

$('.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');
})

添加这段代码后，光标属性不再有效。知道我哪里做错了吗？

Answer 1

它被其他引导类覆盖：

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

一个解决方案就是改变

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

带

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

css cursor：指针不能使用js函数

1 个答案: