我只在这里摆弄HTML + CSS标签:http://jsfiddle.net/75c0cveg/
目前我在每个标签中的标签前都显示了一个图标。该图标当前显示所有按钮状态。
这是CSS
label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}
label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 10px;
}
label[for*='1']:before { content: '\f095'; }
label[for*='2']:before { content: '\f095'; }
label[for*='3']:before { content: '\f095'; }
label:hover {
color: #888;
cursor: pointer;
}
input:checked + label {
color: #555;
border: 1px solid #ddd;
border-top: 3px solid #006372;
border-bottom: 1px solid #fff;
}
我正在努力弄清楚如何才能实现标签前的图标只显示:悬停和:活动状态?
如果选项卡未激活,则图标不应显示。
答案 0 :(得分:1)
简单地转换这个CSS:
label[for*='1']:before { content: '\f095'; }
label[for*='2']:before { content: '\f095'; }
label[for*='3']:before { content: '\f095'; }
进入这个:
input:checked + label[for*='1']:before { content: '\f095'; }
input:checked + label[for*='2']:before { content: '\f095'; }
input:checked + label[for*='3']:before { content: '\f095'; }
并且对于悬停状态,您可以添加以下内容:
input:hover + label[for*='1']:before { content: '\f095'; }
input:hover + label[for*='2']:before { content: '\f095'; }
input:hover + label[for*='3']:before { content: '\f095'; }
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 18px/1 'Open Sans', sans-serif;
color: #555;
background: #eee;
padding-top: 30px;
}
p {
margin: 0 0 20px;
line-height: 1.5;
}
main {
min-width: 320px;
padding: 20px;
margin: 0 auto;
background: #fff;
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
input {
display: none;
}
label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}
label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 10px;
}
input:checked+label[for*='1']:before {
content: '\f095';
}
input:checked+label[for*='2']:before {
content: '\f095';
}
input:checked+label[for*='3']:before {
content: '\f095';
}
input:hover+label[for*='1']:before {
content: '\f095';
}
input:hover+label[for*='2']:before {
content: '\f095';
}
input:hover+label[for*='3']:before {
content: '\f095';
}
label:hover {
color: #888;
cursor: pointer;
}
input:checked+label {
color: #555;
border: 1px solid #ddd;
border-top: 3px solid #006372;
border-bottom: 1px solid #fff;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3 {
display: block;
}

<main>
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">CONTACT 1</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">CONTACT 2</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">CONTACT 3</label>
<section id="content1">
<p>This is CONTACT TEL 1: 111111111111
</p>
</section>
<section id="content2">
<p>This is CONTACT TEL 2: 222222222222
</p>
</section>
<section id="content3">
<p>This is CONTACT TEL 3: 333333333333
</p>
</section>
</main>
&#13;
答案 1 :(得分:1)
以下对我有用:
label:before {
display: none;
}
label:hover:before, input:checked + label:before {
display: inline-block;
}
在&#34;有效&#34;,我想,你指的是实际检查标签时的情况?
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 18px/1 'Open Sans', sans-serif;
color: #555;
background: #eee;
padding-top: 30px;
}
p {
margin: 0 0 20px;
line-height: 1.5;
}
main {
min-width: 320px;
padding: 20px;
margin: 0 auto;
background: #fff;
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
input {
display: none;
}
label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}
label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 10px;
}
label:before {
display: none;
}
label:hover:before, input:checked + label:before {
display: inline-block;
}
label[for*='1']:before { content: '\f095'; }
label[for*='2']:before { content: '\f095'; }
label[for*='3']:before { content: '\f095'; }
label:hover {
color: #888;
cursor: pointer;
}
input:checked + label {
color: #555;
border: 1px solid #ddd;
border-top: 3px solid #006372;
border-bottom: 1px solid #fff;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
display: block;
}
&#13;
<main>
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">CONTACT 1</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">CONTACT 2</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">CONTACT 3</label>
<section id="content1">
<p>This is CONTACT TEL 1: 111111111111
</p>
</section>
<section id="content2">
<p>This is CONTACT TEL 2: 222222222222
</p>
</section>
<section id="content3">
<p>This is CONTACT TEL 3: 333333333333
</p>
</section>
</main>
&#13;
答案 2 :(得分:1)
您可以将 :hover
链接为:hover:before
来定位 pseudo-classes 状态:
label[for*='1']:hover:before { content: '\f095'; }
label[for*='2']:hover:before { content: '\f095'; }
label[for*='3']:hover:before { content: '\f095'; }
请注意,:hover
必须才能 :before
。
要定位 :active
状态,您需要获得更多创意,而不是定位label
之后的input
使用 :checked
adjacent sibling combinator (+
) :
input:checked + label[for*='1']:before { content: '\f095'; }
input:checked + label[for*='2']:before { content: '\f095'; }
input:checked + label[for*='3']:before { content: '\f095'; }
请注意,考虑到您在所有六种情况下设置完全相同的内容,您可以将它们链接在一起:
label[for*='1']:hover:before,
label[for*='2']:hover:before,
label[for*='3']:hover:before,
input:checked + label[for*='1']:before,
input:checked + label[for*='2']:before,
input:checked + label[for*='3']:before {
content: '\f095';
}
在以下示例中,可以看到标签在:active
和:hover
上都有效:
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 18px/1 'Open Sans', sans-serif;
color: #555;
background: #eee;
padding-top: 30px;
}
p {
margin: 0 0 20px;
line-height: 1.5;
}
main {
min-width: 320px;
padding: 20px;
margin: 0 auto;
background: #fff;
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
input {
display: none;
}
label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}
label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 10px;
}
label[for*='1']:hover:before { content: '\f095'; }
label[for*='2']:hover:before { content: '\f095'; }
label[for*='3']:hover:before { content: '\f095'; }
input:checked + label[for*='1']:before { content: '\f095'; }
input:checked + label[for*='2']:before { content: '\f095'; }
input:checked + label[for*='3']:before { content: '\f095'; }
label:hover {
color: #888;
cursor: pointer;
}
input:checked + label {
color: #555;
border: 1px solid #ddd;
border-top: 3px solid #006372;
border-bottom: 1px solid #fff;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
display: block;
}
&#13;
<main>
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">CONTACT 1</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">CONTACT 2</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">CONTACT 3</label>
<section id="content1">
<p>This is CONTACT TEL 1: 111111111111
</p>
</section>
<section id="content2">
<p>This is CONTACT TEL 2: 222222222222
</p>
</section>
<section id="content3">
<p>This is CONTACT TEL 3: 333333333333
</p>
</section>
</main>
&#13;
我还为此 here 创建了一个JSFiddle。
希望这有帮助! :)