Question

我正在尝试为页面页脚构建一个简单的社交媒体链接，使用带有圆形背景的字体真棒图标，请编写代码笔： http://codepen.io/anon/pen/ojmJYE

 <i class="fa fa-circle fa-stack-2x icon-background1" ></i>

对于翻转效果，我希望在背景圆周围有一个“1px黑色边框”，因此它会从“实色”更改为“轮廓”，并保留图标 - 但我似乎无法引用圆形背景的CSS边框属性？< / p>

Answer 1

非常简单。在hover州内提供border-radius: 50% !!

我已将1px solid #000 border和.social-container { backgroun: #66ffdc; float: right; font-size: 1.2em } .icon-background1 { color: #000 } .icon-background2 { color: #fff; } a:hover .icon-background1 { color: #fff; border-radius: 50%; box-shadow: 0px 0px 5px #000; } a:hover .icon-background2 { color: #000; border-radius: 50%; box-shadow: 0px 0px 5px #000; }添加到图标以获取此输出

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="social-container">
  <a href="" class="fa-stack fa-lg" style="text-decoration:none; margin-top:0">
    <i class="fa fa-circle fa-stack-2x icon-background1"></i>
    <i class="fa  fa-facebook fa-stack-1x  icon-background2"></i>
  </a>
  <a href="" class="fa-stack fa-lg" style="text-decoration:none">
    <i class="fa fa-circle fa-stack-2x icon-background1"></i>
    <i class="fa fa-instagram fa-stack-1x  icon-background2"></i>
  </a>
</div>

// use jst templates by overriding marionette render
Marionette.Renderer.render = function(template, data) {
    // allow No template
    if (template === undefined) {
        return '';
    }
    if (!window.JST[template]) {
        throw 'Template "' + template + '" not found!';
    }
    // underscore create a template
    return _.template(JST[template](data));
};

Answer 2

这似乎对我来说最好。

CSS

a:hover .icon-background1  {
  color: #fff;
  border: 2px solid #000;
  border-radius: 50%;
  transform: scale(0.80);
  box-sizing: border-box;
}

Answer 3

.social-container
{   width: 100%;
    margin: 40px 0 50px;
    list-style-type: none;
    text-align: left;
    padding: 0;
    float: left;
    text-align: center;}
.social-container li i
{
    width: 42px;
    height: 42px;
    display: block;
    border: 1px solid #aaa9ad;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    line-height: 42px;
    color: #aaa9ad;
    font-size: 21px;
}

.icon-background1          {color: #000 }
.icon-background2          {color: #fff;}


a:hover .icon-background1  {color: #fff}
a:hover .icon-background2  {color: #000;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<ul class="social-container">
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
</ul>

字体真棒社交媒体图标堆栈边框

3 个答案: