CSS 标签 :before - show icon before the label only on :hover and :active

Question

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

我正在努力弄清楚如何实现标签前的图标只会出现在 :hover 和 :active 状态下？

如果选项卡未处于事件状态，则图标不应可见。

Answer 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>