Question

我有这些css代码：

    .tabs_inactive {
        border: 1px solid #cccccc;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        background-color: #eeeeee;
        border-bottom: #cccccc;
    }

    .tabs_inactive:hover {
        background-color: #ff8000;
        border-color: #ff8000;
        cursor: pointer;
    }

    /*this does not work*/
    .tabs_inactive:hover a {
        color: #ffffff;
    }

    .tabs_active {
        background-color: #ffffff;
        border-bottom: 2px solid #ffffff;
    }

    .tabs_active:hover{
        background-color: #ffffff;
        border: 1px solid #cccccc;
        border-bottom: 2px solid #ffffff;
        cursor: default;
    }

    .tabs_active:hover a {
        cursor: default;
    }

最后一个（.tab_active:hover a）在我的网页中完美运行，但第三个块不是。我无法弄清楚为什么会这样。有人可以解释为什么第三块不起作用吗？谢谢！

更新1：这是相对的JavaScript代码：

//add class "tabs_inactive" to the original tabs option.
$( "#tabs ul li" ).addClass("tabs_inactive");

//default: set the first tab as the active one.
$( "#tabs ul li" ).first().toggleClass("tabs_active");

//to make sure the style sheet will be changed when click on the inside <a> tag
$( "#tabs ul li a" ).live( "click", function () {
    //close other tabs
    $( this ).parents("ul").children("li").each( function (){
        if( $(this).hasClass("tabs_active")){
            $(this).removeClass("tabs_active");
        }
    });
    $( this ).parent().toggleClass("tabs_active");
    return false;
});
//change the class to "tabs_active" when the tab is clicked
$( "#tabs ul li" ).live( "click", function () {
    //close other tab
    $( this ).parent().children("li").each( function (){
        if( $(this).hasClass("tabs_active")){
            $(this).removeClass("tabs_active");
        }
    });
    $( this ).toggleClass("tabs_active");
});

还有HTML代码：

        <div id="tabs">
            <ul>
                <li><a href="#homepage">HOME</a> </li>
                <li><a href="#option1">option1</a> </li>
            </ul>
            <div id="homepage">
                <p>
                    HOME:
                    Here is the home page
                </p>
            </div>
            <div id="option1">
                <p>
                    Option1:
                    Here is the tag page 1
                </p>
            </div>
        </div>

所以，是的，我正在尝试实现一个标签菜单，这是一种练习，所以我不想使用原始的JqueryUI函数。有人知道问题是什么？谢谢。

Answer 1

对不起伙计们，这不是拼写错误或其他东西，我只是犯了一个错误，我之前给#tab ul li a一个字体颜色样式，它正在使用id选择器，并使函数{{ 1}}根本不起作用。我将该标签从id转换为class然后每件事都运行正常。谢谢大家，这是我的坏事。

CSS - 悬停不起作用

1 个答案: