【发布时间】：2017-06-19 18:03:25
【问题描述】：
我有一个不知道如何修复的 CSS 样式。我在个人博客上工作，作者在其中发布他们的图片。当不是带有光标的指针时，您好在图像上使用黑白效果。当关闭光标图像时，会获得实时颜色。
我也希望在社交分享按钮上也有相同的风格，这在每张图片中都有显示。我在谷歌搜索了那个效果，发现了这个 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.
}
但这一直是灰色的。用光标关闭时如何使实时颜色返回？
【问题讨论】：
-
你能发布你用来创建社交按钮的 html/css 吗？
-
它不是 html，它是使用 Wordpress 的 Social Warfare 插件通过 ShortCode 插入的。 wordpress.org/plugins/social-warfare
-
这将在页面上呈现为 HTML 和 CSS - 分享一下。
-
在第一篇文章中发布了 HTML。
-
需要在这个类上做一些事情，改变用光标关闭时的悬停。
nc_tweetContainer