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

將此CSS添加到您的CSS文件中

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

看到這個小提琴： http : //jsfiddle.net/JfGVE/1720/

Answer 2

使用類名（ .not-hearted ）而不是僅使用<span> 。 看看下面的代碼片段：

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

 #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'; } 

 <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

只需更改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 4

如果您想使用jQuery代碼來完成此操作，則可以鏈接到選擇器並使用hover方法。

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

Answer 5

將#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 6

您需要做的就是使用正確的結構:)這里不需要javascript。

（我為您提供了兩個示例-第一個示例用於在div上hover ，第二個示例用於在span上懸停）。

 #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'; } 

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