CSS - hover doesn't work [closed] - css

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
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>HOME </li>
<li>option1 </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.