将鼠标悬停在圆形容器上

Question

我的圆圈上有一个悬停效果，下面还有一些文字。 现在，我想要实现的是在将整个圆形容器而不只是圆形本身翻转时触发悬停效果。

演示 http://jsfiddle.net/kL0vxrxL/

 .icon-circle-box { text-align: center; margin: 0 auto 130px; } .icon-circle { display: inline-block; font-size: 42px; cursor: pointer; margin: 0 0 28px; width: 100px; height: 100px; line-height: 100px; border-radius: 50%; text-align: center; position: relative; z-index: 1; color: #fff; } .icon-circle-box p { margin-top: 13px; } .icon-circle:after { pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 50%; content: ''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .icon-circle:before { font-family: 'lineicons'; speak: none; font-size: 42px; line-height: 100px; display: block; } .circle-effect .icon-circle { color: #000; box-shadow: 0 0 0 2px #000; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; } .circle-effect .icon-circle:after { top: -2px; left: -2px; padding: 2px; z-index: -1; background: #000; opacity: 0; filter: alpha(opacity=0); -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; -moz-transition: -moz-transform 0.2s, opacity 0.2s; transition: transform 0.2s, opacity 0.2s; } .icon-circle:hover { color: #fff; } .icon-circle:hover:after { -webkit-transform: scale(0.85); -moz-transform: scale(0.85); -ms-transform: scale(0.85); transform: scale(0.85); opacity: 1; filter: alpha(opacity=100); } 

 <div class="icon-circle-box circle-effect"> <a href="#" class="icon-circle"></a> <p>Donec id elit non mi porta gravida at eget metus.</p> </div> 

Answer 1

我试图实现的是，当您将鼠标悬停在整个圆形容器而不是圆形本身上时，会触发该悬停效果。

然后，将:hover伪类添加到父元素.icon-circle-box 。

更新示例

.icon-circle-box:hover .icon-circle:after {
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -ms-transform: scale(0.85);
    transform: scale(0.85);
    opacity: 1;
    filter: alpha(opacity=100);
}