我找到了这个标签内容并且到目前为止已经设置了但是对于我的生活，当你将鼠标悬停在它上面时，无法弄清楚如何将标签的颜色更改为不同的颜色。
我认为这将是标签标签：悬停，但似乎不是。
我的代码在这里：
body, html {
height: 100%;
margin: 0;
-webkit-font-smoothing: antialiased;
font-weight: 100;
background: #ffffff;
text-align: center;
font-family: helvetica;
}
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 670px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 75px auto;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
border-radius: 0px 0px 0 0;
color: #ffffff;
font-size: 18px;
font-weight: normal;
font-family: helvetica;
background: #f3f3f3;
cursor: pointer;
position: relative;
top: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: #9eab05);
top: 1px;
}
/* LABEL COLOURS */
[id^=tab]:checked + label {
background: #e3ba12;
color: white;
top: 0;
}
[id^=tabfindme]:checked + label {
background: #e3ba12;
color: white;
top: 0;
}
[id^=tabtwitter]:checked + label {
background: #0085a1;
color: white;
top: 0;
}
[id^=tabtv]:checked + label {
background: #6a2150;
color: white;
top: 0;
}
[id^=tabteach]:checked + label {
background: #d10373;
color: white;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
/* CONTENT COLOURS */
.findmecontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #e3ba12;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s; }
.twittercontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #0085a1;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.tvcontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #6a2150;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.teachcontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #d10373;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tabfindme">
<label for="tabfindme">FIND ME</label>
<div id="tab-content1" class="findmecontent animated fadeIn">
You can find me at the following venues:
<ul>
<li>BBC Television Centre</li>
<li>OutBurst Festival</li>
</ul>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tabtwitter">
<label for="tabtwitter">TWITTER</label>
<div id="tab-content2" class="twittercontent animated fadeIn">
Twitterfeed
</div>
</li>
<li>
<input type="radio" name="tabs" id="tabtv">
<label for="tabtv">TELEVISION</label>
<div id="tab-content3" class="tvcontent animated fadeIn">
Click the links to see me on TV
<ul>
<li>BBC Television Centre</li>
<li>ITV</li>
</ul>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tabteach">
<label for="tabteach">HOW I TEACH</label>
<div id="tab-content4" class="teachcontent animated fadeIn">
How I teach
</div>
</li>
</li>
答案 0 :(得分：2)
.tabs label:hover {
background: #9eab05;
top: 1px;
}
有一个＆＃34;）＆＃34; ＆lt; - 删除它
拨弄
body, html {
height: 100%;
margin: 0;
-webkit-font-smoothing: antialiased;
font-weight: 100;
background: #ffffff;
text-align: center;
font-family: helvetica;
}
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 670px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 75px auto;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
border-radius: 0px 0px 0 0;
color: #ffffff;
font-size: 18px;
font-weight: normal;
font-family: helvetica;
background: #f3f3f3;
cursor: pointer;
position: relative;
top: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: #9eab05;
top: 1px;
}
/* LABEL COLOURS */
[id^=tab]:checked + label {
background: #e3ba12;
color: white;
top: 0;
}
[id^=tabfindme]:checked + label {
background: #e3ba12;
color: white;
top: 0;
}
[id^=tabtwitter]:checked + label {
background: #0085a1;
color: white;
top: 0;
}
[id^=tabtv]:checked + label {
background: #6a2150;
color: white;
top: 0;
}
[id^=tabteach]:checked + label {
background: #d10373;
color: white;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
/* CONTENT COLOURS */
.findmecontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #e3ba12;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s; }
.twittercontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #0085a1;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.tvcontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #6a2150;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.teachcontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #d10373;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
答案 1 :(得分：1)
也许改变这个？
.tabs label:hover {
background: #9eab05;
top: 1px;
}
进入：
.tabs label:hover {
background: #9eab05;
color:#000;
top: 1px;
}
如果要更改文本的颜色。或者将背景改成其他东西。
答案 2 :(得分：0)
使用悬停代替检查，例如在“找我”按钮
[id^=tabfindme]:hover + label {
background: red
color: white;
top: 0;
}