html - 用div制作的图标悬停效果，边距问题

Question

这是my Fiddle :

#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 周)，我看到了这种悬停效果(位于社交图标 this page 的底部)。

所以我尝试用我有限的技术做出同样的悬停效果。过了很长一段时间，我用两个 div 和一个 Icon 做了同样的效果。

现在的问题是:

1. 我无法为任何“图标”设置边距，这意味着我希望 FacebookIcon 和 TwitterIcon 之间有一个间隙，这样它们就不会像 FacebookIcon 干扰 Twitter 图标那样干扰。

2. 如何将鼠标悬停在内部 div 上并激活外部 div 的悬停(我无法使内部 div 成为外部 div 的父级，因为外部必须大于内部)。

3. 我希望 FacebookIcon Outer 从中心开始生长，而不是像现在这样。 (就像上面提到的网页中的示例一样。

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

感谢您的建议，并对我的英语不好(这里是德语)表示歉意。

Answer 1

Im not able to set a margin to any of the "Icons"

那是因为margin属性(property)is not applicable至display: table-cell元素。

How can I hover over the inner div and activating the hover of the outer 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;
}

<强> WORKING DEMO 。