0
J'ai trouvé ce contenu à onglets et jusqu'ici le configurer, mais pour la vie de moi ne peut pas comprendre comment changer la couleur de l'onglet à une couleur de différence lorsque vous passez la souris dessus. Je pensais que ce serait l'étiquette des onglets: survoler, mais il ne semble pas être.Des conseils sur les flotteurs?
Mon code est ici:
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>
J'ai mis à jour le code avec quelques légères modifications au texte. Ma dernière sortie est quand je planerai le Find Me, la couleur du hover sera jaune, et quand je clique dessus, elle restera jaune. Et le Twitter, le point d'inflexion sera bleu et l'onglet restera bleu, etc. Si vous pouvez conseiller à nouveau, cela me dérange le cerveau. Je peux faire ce qui précède, mais ensuite perdre la couleur après avoir cliqué sur l'onglet, ou le premier onglet n'est pas jaune en charge. –