jquery - 如何在共享按钮上获得白色/黑色效果？

Question

我有一个不知道如何修复的 CSS 样式。我在个人博客上工作，作者在其中发布他们的图片。您好，当指针上没有光标时，对图像使用黑/白效果。当关闭光标图像时获得实时颜色。

我希望在社交分享按钮上也有同样的风格，这在每张图片中都有显示。我在 Google 中搜索了该效果，并找到了这个 CSS:

filter: grayscale(100%);

但这会使按钮一直变灰，我想以与图像相同的方式更改颜色。你可以看看我在说什么here .

一些提示如何做到这一点？谢谢。

编辑:这是通过执行短代码呈现的 HTML:

    <div class="entry">
            <div class="nc_socialPanel swp_flatFresh swp_d_fullColor 
swp_i_fullColor swp_o_fullColor scale-100 scale-fullWidth" data-
position="none" data-float="floatNone" data-count="4" data-
floatColor="#ffffff" data-emphasize="0"><div class="nc_tweetContainer 
swp_fb" data-id="3" data-network="facebook"><a rel="nofollow" 
target="_blank" href="https://www.facebook.com/share.php?
u=http%3A%2F%2Fjitkasimkova.cz%2Ftests%2F" data-
link="http://www.facebook.com/share.php?
u=http%3A%2F%2Fjitkasimkova.cz%2Ftests%2F" class="nc_tweet"><span 
class="swp_count swp_hide"><span class="iconFiller"><span 
class="spaceManWilly"><i class="sw sw-facebook"></i><span class="swp_share"> 
Share</span></span></span></span></a></div><div class="nc_tweetContainer 
twitter" data-id="2" data-network="twitter"><a rel="nofollow" 
target="_blank" href="https://twitter.com/share?
original_referer=/&text=tests&url=http://jitkasimkova.cz/tests/" data-
link="https://twitter.com/share?
original_referer=/&text=tests&url=http://jitkasimkova.cz/tests/" 
 class="nc_tweet"><span class="swp_count swp_hide"><span class="iconFiller">
 <span class="spaceManWilly"><i class="sw sw-twitter"></i><span 
 class="swp_share"> Tweet</span></span></span></span></a></div><div 
class="nc_tweetContainer googlePlus" data-id="1" data-network="google_plus">
<a rel="nofollow" target="_blank" href="https://plus.google.com/share?
url=http%3A%2F%2Fjitkasimkova.cz%2Ftests%2F" data-
link="https://plus.google.com/share?
 url=http%3A%2F%2Fjitkasimkova.cz%2Ftests%2F" class="nc_tweet"><span 
class="swp_count swp_hide"><span class="iconFiller"><span 
class="spaceManWilly"><i class="sw sw-google-plus"></i><span 
class="swp_share"> +1</span></span></span></span></a></div><div 
 class="nc_tweetContainer nc_pinterest" data-id="4" data-
network="pinterest"><a rel="nofollow" onClick="var 

e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src ','//assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e);"class="nc_tweet noPop"> Pin

我通过从下面添加代码来获得这种风格:

div.nc_socialPanel .nc_tweetContainer {
-webkit-border-radius: 2px;
border-radius: 2px;
cursor: pointer;
float: left;
font-family: Lato;
height: 32px;
margin: 0 5px;
min-width: 34px;
overflow: hidden;
text-align: center;
-webkit-transition: all .1s linear;
transition: all .1s linear;
border-size: 1px;
 filter: grayscale(100%); // Added this line only.
}

但是那一直保持灰色。如何使光标关闭时返回实时颜色？

Answer 1

您可以使用您提到的灰度滤镜来完成此操作。您只需要在悬停时摆脱过滤器。

.nc_tweetContainer {
  transition: filter 0.25s;
  filter: grayscale(100%);
}
.nc_tweetContainer:hover{
  transition: filter 0.25s;
  filter: none;
}

<img class="nc_tweetContainer" src="http://www.placecage.com/200/300" alt="placecage">