CSS3 ::在悬停之前

Question

我有一个元素可以在点击时在不同的font awesome图标之间切换。我也希望这种效果在悬停时。但它似乎并没有像我期望的那样发挥作用。

演示http://jsfiddle.net/JfGVE/1718/

工作正常

#heart-btn span.hearted::before {
  color: #c71616;
  content: '\f004';
}

不能工作

#heart-btn:hover span.hearted::before {
  color: #c71616;
  content: '\f004';
}

不能工作

#heart-btn span.hearted:hover::before {
  color: #c71616;
  content: '\f004';
}

Answer 1

使用班级名称（.not-hearted）而非<span>。请看下面的代码段：

＆＃13;

＆＃13;

$("#heart-btn span").click(function() {
  $(this).toggleClass('not-hearted hearted');
});

＆＃13;

#heart-btn span.hearted::before {
  color: #c71616;
  content: '\f004';
}

#heart-btn:hover > .not-hearted:before {
  color: #c71616;
  content: '\f004';
}

#heart-btn span.not-hearted::before {
  color: #c71616;
  content: '\f08a';
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="heart-btn">
  <span class="fa not-hearted"></span>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！

Answer 2

只需更改css的顺序。

$("#heart-btn span").click(function() {
  $(this).toggleClass('not-hearted hearted');
});

#heart-btn span.hearted::before {
  color: #c71616;
  content: '\f004';
}

#heart-btn span.not-hearted::before {
  color: #c71616;
  content: '\f08a';
}

#heart-btn:hover > span::before {
  color: #c71616;
  content: '\f004';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="heart-btn">
  <span class="fa not-hearted"></span>
</div>

Answer 3

如果您想使用jQuery代码，可以链接到选择器并使用hover方法。

$("#heart-btn span").click(function() {
  $(this).toggleClass('not-hearted hearted');
}).hover(function() {
  $(this).toggleClass('not-hearted hearted');
});

Answer 4

将#heart-btn:hover > span::before更改为#heart-btn:hover > span.not-hearted::before

$("#heart-btn span").click(function() {
  $(this).toggleClass('not-hearted hearted');
});

#heart-btn span.hearted::before {
  color: #c71616;
  content: '\f004';
}

#heart-btn:hover > span.not-hearted::before {
  color: green;
  content: '\f004';
}

#heart-btn span.not-hearted::before {
  color: #c71616;
  content: '\f08a';
}
#heart-btn:hover span.hearted::before {
  color: black;
  content: '\f004';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="heart-btn">
  <span class="fa not-hearted"></span>
</div>

Answer 5

你需要做的就是使用正确的结构:)这里不需要javascript。

（我给了你两个例子 - 第一个是div上的hover，第二个是悬停在span上。

＆＃13;

＆＃13;

#heart-btn1 span.hearted::before, #heart-btn2 span.hearted::before {
  color: #c71616;
  content: '\f004';
}

#heart-btn1:hover > span:before {
  color: #c71616;
  content: '\f08a';
}
#heart-btn2 > span:hover:before {
  color: #c71616;
  content: '\f08a';
}

＆＃13;

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="heart-btn1">
  <span class="fa hearted"></span>
</div>
<div id="heart-btn2">
  <span class="fa hearted"></span>
</div>

＆＃13;

＆＃13;

＆＃13;