【问题标题】:How to change social icon color when move with mouse over them?将鼠标移到社交图标上时如何更改社交图标颜色?
【发布时间】:2017-07-13 06:05:09
【问题描述】:

my site 有一个问题。我的网站上有社交图标栏,并且想在鼠标悬停时更改颜色。

我说的是这部分:

并且想在这个site

提前致谢!

【问题讨论】:

  • .aio-tooltip:hover .aio-icon { background: blue; }
  • 是的,这是针对一个圈子,但其他圈子呢?正如您所注意到的,每个圆圈都有不同的颜色。
  • 要么尝试自己解决问题,要么在您当前拥有的所有内容上创建一个工作演示,而不是链接到第 3 方站点。链接到您的个人网站不会使 SO 的其他用户受益。
  • 我试过了,但在每个圆圈上都给我蓝色。怎么换成不一样的颜色?那么链接演示站点有什么问题呢?很高兴展示我的需求。
  • stackoverflow.com/help/how-to-ask "包含足够的代码以允许其他人重现问题。有关此方面的帮助,请阅读如何创建最小、完整和可验证的示例。如果可以创建实时您可以链接到的问题示例(例如,在 sqlfiddle.comjsbin.com 上)然后这样做 - 但也要在您的问题本身中包含代码。并非每个人都可以访问外部站点,并且链接可能会随着时间的推移而中断。”

标签: css wordpress colors move mousehover


【解决方案1】:

这是我自己做的工作解决方案。

  div.aio-icon:hover.advanced.faceboook {
  border-color: #3b5996;
  background-color: #3b5996;
  }
  div.aio-icon:hover.advanced.twitter {
  border-color: #29c5f6;
  background-color: #29c5f6;
  }
  div.aio-icon:hover.advanced.instagram {
  border-color: #b16c4f;
  background-color: #b16c4f;
  }
  div.aio-icon:hover.advanced.youtube{
  border-color: #f0251d;
  background-color: #f0251d;
  }
 div.aio-icon:hover.advanced.soundcloud{
  border-color: #ff6d00;
  background-color: #ff6d00;
  }

我为每个元素插入了适当的类。

【讨论】:

    【解决方案2】:

    您可能希望使用悬停选择器,但是对于每个链接的不同颜色,您需要将链接的类名放在图标类之前,如下所示:

    .58ae1dbc7fa2c .aio-icon:hover {
          border-color: blue;
          background-color: blue;
        }
    

    您可以将“蓝色”更改为您想要的任何蓝色阴影。

    您还可以添加使用过渡属性来让颜色在悬停时淡入淡出,如下所示:

    .58ae1dbc7fa2c .aio-icon:hover {
      border-color: blue;
      background-color: blue;
      transition: all .3s ease-in-out;
    }
    

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-08-25
    • 2017-12-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-05-01
    • 1970-01-01
    相关资源
    最近更新 更多