將鼠標懸停在圓形容器上

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);
}