Question

I have these css code:

    .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;
    }

The last one (.tab_active:hover a) is working perfectly in my webpage, but the third block is not. I can not figure out why this happened.
Could somebody explain me why the third block doesn’t work?
Thanks!

---

UPDATE 1:
Here is the relative JavaScript code:

//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");
});

And also HTML code:

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

So, yes, I am trying to implement a tab menu, and this is a practice so I don’t want to use the original JqueryUI function. Dose somebody know that what is the problem?
Thank you.

Answer 1

Sorry guys, it’s not a typo or something else, I just make a mistake that I give a font color style to the #tab ul li a before, which is using the id selector, and that make the the function toggleClass doesn’t work at all. I convert that tag from id to class then every thing works fine. thanks all, That’s my bad.