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做了同样的效果。

问题在于：

我无法为任何“图标”设置边距，这意味着我希望FacebookIcon和TwitterIcon之间存在差距，因此它们不会像FacebookIcon干扰Twitter图标一样受到干扰。
如何将鼠标悬停在内部div并激活外部div的悬停（我不能使内部div成为外部的父级，因为外部必须大于内部）。
我希望FacebookIcon Outer从中心发展而不是像现在这样做。（就像上面提到的网页中的例子一样。

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

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

Answer 1

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

这是因为margin属性is not applicable到display: table-cell元素。

如何将鼠标悬停在内部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

图标悬停效果使用div，保证金问题

1 个答案: