CSS标签：之前 - 仅在标签上显示图标：hover和：active

时间：2017-10-25 23:22:11

标签： css label

我只在这里摆弄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;
}

我正在努力弄清楚如何才能实现标签前的图标只显示：悬停和：活动状态？

如果选项卡未激活，则图标不应显示。

3 个答案:

答案 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'; }

＆＃13;
＆＃13; 
@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;
}
＆＃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;
＆＃13;
＆＃13;

答案 1 :(得分：1)

以下对我有用：

label:before {
    display: none;
}
label:hover:before, input:checked + label:before {
    display: inline-block;
}

在＆＃34;有效＆＃34;，我想，你指的是实际检查标签时的情况？

＆＃13;
＆＃13; 
@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;
＆＃13;
＆＃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上都有效：

＆＃13;
＆＃13; 
@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;
＆＃13;
＆＃13;

我还为此 here 创建了一个JSFiddle。

希望这有帮助！ ：）

相关问题
最新问题