I am willing to ask all the gods why the color does not change when the mouse is rolled over~_html/css_WEB-ITnose

html代码:

• aaaa


• bbbb


• cccc


• dddd

1111

2222

3333

4444

CSS code:

.tab_main{
width:600px;
height: 400px;
border:1px solid gray;
}
/*tab label*/
#ch_tab{


}
.ch_ul_tab{
width :560px;
height:26px;
border-bottom:1px solid gray;
}
.ch_ul_tab li{
width:70px;
height:25px;
float :left;
list-style:none;
margin-left:20px;
text-align:center;
background:green;
border-top:1px solid gray;
border-left:1px solid gray;
border-right:1px solid gray;

}
/*tab tag content*/
#ch_tab_content{
clear:both;
width:600px;
height:364px;

}
.active{
background:yellow;
border-bottom:1px solid white;
}

Reply to discussion (solution)

I want to change the green of the TAB label to yellow

In this style :
.ch_ul_tab li{
width:70px;
height:25px;
float:left;
list-style:none;
margin-left:20px;
text-align:center;
background:green;
border-top:1px solid gray;
border-left:1px solid gray;
border-right:1px solid gray;

}
Remove background:green; and you can simply change the color (it seems to be adding background:yellow; to the above style), but the logic is wrong!

.ch_ul_tab li.active{
background:yellow;
border-bottom:1px solid white;
}

.ch_ul_tab li.active{
background:yellow;
border-bottom:1px solid white;
}

Correct answer.