图标悬停效应由DIV制成，保证金问题

Question

这是我的小提琴：

#facebookIcon{ 
    vertical-align:middle;
    color:white;
    font-size:5.5em;
    opacity:0.4; 
}
#facebookinner:hover  #facebookIcon{
    opacity:1.0;
}
#facebookinner{
    background:#3b5998;
    border-radius:100px;
    height:100px;
    width:100px;
    margin:0 auto;
    text-align:center;
    line-height:100px; 
    opacity:0.4;
    -webkit-transition:
}
#facebookinner:hover{
    opacity:1.0;
}
#facebookouter {  
  background-color:Green;
  border:5px solid rgba(0,0,0,0);
  height:100px;
  width:100px;
  border-radius:100px;
  display: table-cell;
  vertical-align: middle;
 -webkit-transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-out,border-                   radius 0.2s     linear,margin 0.2s linear;
  transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-out,border-radius 0.2s     linear,margin 0.2s linear;
    -moz-transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-out,border-radius 0.2s     linear,margin 0.2s linear;
}
#facebookouter:hover {
    height:130px;
    width:130px;
    border-radius:130px;
    border:5px solid #3b5998;
    opacity:1.0;
    -webkit-transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-                    out,border-radius 0.2s linear,margin 0.2s linear;
    transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-out,border-radius 0.2s linear,margin 0.2s linear;
    -moz-transition: height 0.2s linear, width 0.2s linear,border 0.2s ease-out,border-radius 0.2s linear,margin 0.2s linear;   
}
footer {
 margin-top:250px;
 height:150px;
 position: absolute;
 right: 0;
 bottom: 10;
 left: 0;
 padding: 5 rem;
 background-color: Green;
 text-align: center;
 padding-top:30px;
 padding-left:40px;
}

/* _ __ _ __ __ __ __ _ __ __ _ _ __ _ 这是第二个图标 _ __ __ __ __ __ _ __ _ __ _ ____ */

    #twitterIcon{
    vertical-align:middle;
    color:white;
    font-size:3.5em;
    -webkit-transition:font-size 0.2s;
    -moz-transition:font-size 0.2s;
     transition:font-size 0.2s;
 }
 #twitterinner:hover  #twitterIcon{
    opacity:1.0;
    font-size: 3.5 em
 }
 #twitterinner {
    background:#23dcd5;
    border-radius:100px;
    height:100px;
    width:100px;
    margin:0 auto;
    text-align:center;
    line-height:100px; 

    -webkit-transition:height 0.2s, width 0.2s, line-height 0.2s;
    -moz-transition:height 0.2s, width 0.2s, line-height 0.2s;
    transition:height 0.2s, width 0.2s, line-height 0.2s;
}
#twitterinner:hover{
    opacity:1.0;
    height: 80px;
    width:80px;
    line-height:80px;
}
#twitterouter{    
background-color:Green;
border:5px solid #23dcd5;
height:100px;
width:100px;
border-radius:100px;
display: table-cell;
vertical-align: middle;
opacity:0.7;
}
#twitterouter:hover {
    opacity:1.0;
} 

我是CSS的初学者（学习1周），我看到了这种悬停效应（在此页面的底部，社交图标）。

所以我试图以有限的技能来产生相同的悬停效果。很长一段时间后，我对两个Div和一个图标产生了相同的效果。

问题现在是：

1. 我无法为任何"图标"设置余量，这意味着我想要Facebookicon和Twittericon之间的差距，因此它们不会像Facebookicon那样干扰Twitter图标。

2. 我如何悬停在内部的div上并激活外部div的悬停（我不能使内部的div成为外部的母体，因为外部必须比内部大）。

3. 我希望Facebookicon外在从中心成长，而不像它现在这样做。（就像上面提到的网页中的示例一样。

我已经很长时间搜索了这种解决方案，没有发现任何合适的东西。可能有一种更简单的方法来创建此图标，这将是另一个解决方案:)

感谢您的建议，很抱歉我的英语不好（在这里德语）。

Answer 1

我无法为任何"图标"设置边距

那是因为margin属性不适用于display: table-cell元素。

我如何悬停在内部的div上并激活悬停的 外div

好吧，您需要更改策略。在儿童（<i>标签）上设置所有必要的CSS声明，然后更改parent:hover i选择器上的样式。

我们去：

html：

<footer>
    <a href="#" class="icon-wrapper">
        <i class="icon icon-facebook"></i>
    </a>
    <a href="#" class="icon-wrapper"> 
        <i class="icon icon-twitter"></i>
    </a>
</footer>

CSS：

.icon-wrapper {
    float: left;
    display: block;
    margin: 0 1.875rem;
    color: white;
    font-size: 5.5rem;
}
.icon-wrapper i.icon {
    display: block;
    width: 8rem;
    height: 8rem;
    line-height: 8rem;
    border-radius: 50%;
    opacity: 0.5;
    transition: all .2s;
}
.icon-wrapper:hover i.icon {
    opacity: 1;
    box-shadow: 0 0 0 1.5625rem green,  /* <-- = the parent's background-color */
                0 0 0 1.875rem #9b59b6;
}
.icon-facebook {
    background-color: #3b5998;
}
.icon-twitter {
    background-color: #23dcd5;
}

工作演示。