Html 圆形容器的悬停效应

我有一个圆圈，上面有悬停效果，下面有一些文字。现在，我试图实现的是，当你翻滚整个圆容器而不仅仅是圆本身时，触发悬停效果

演示

。图标圆形框{
文本对齐：居中；
保证金：0自动130px；
}
.图标圈{
显示：内联块；
字体大小：42px；
光标：指针；
边际：028px；
宽度：100px；
高度：100px；
线高：100px；
边界半径：50%；
文本对齐：居中；
位置：相对位置；
z指数：1；
颜色：#fff；
}
.图标圆框p{
边缘顶端：13px；
}
.图标圈：之后{
指针事件：无；
位置：绝对位置；
宽度：100%；
身高：100%；
边界半径：50%；
内容：''；
-webkit框大小：内容框；
-moz框大小：内容框；
框大小：内容框；
}
.图标圈：之前{
字体系列：“线条图标”；
说：没有；
字体大小：42px；
线高：100px；
显示：块；
}
.圆圈效果.图标圆圈{
颜色：#000；
盒影：0 2px#000；
-webkit转换：颜色0.3s；
-moz过渡：颜色0.3s；
过渡：颜色0.3s；
}
.圆圈效果。图标圆圈：之后{
顶部：-2px；
左：-2px；
填充：2px；
z指数：-1；
背景：#000；
不透明度：0；
过滤器：alpha（不透明度=0）；
-webkit转换：-webkit转换0.2s，不透明度0.2s；
-moz变换：-moz变换0.2s，不透明度0.2s；
过渡：变换0.2s，不透明度0.2s；
}
.图标圈：悬停{
颜色：#fff；
}
.图标圈：悬停：之后{
-webkit变换：比例（0.85）；
-moz变换：比例（0.85）；
-ms变换：标度（0.85）；
变换：比例（0.85）；
不透明度：1；
过滤器：α（不透明度=100）；
}

Donec在eget metus为非mi porta孕妇确定了最佳身份

我试图实现的是，当你翻转整个圆圈容器而不仅仅是圆圈本身时，触发悬停效果

然后将

：hover

伪类添加到父元素

。图标圆框

我试图实现的是，当你翻转整个圆圈容器而不仅仅是圆圈本身时，触发悬停效果

然后将

：hover

伪类添加到父元素

。图标圆框

---

“现在，我试图实现的是，当您滚动整个圆容器而不仅仅是圆本身时，触发悬停效果”-然后在容器上放置

：hover

，并使用后代兄弟组合器…“现在，我试图实现的是，在滚动整个圆容器而不仅仅是圆本身时触发悬停效果”–然后将

：悬停在容器上并使用后代兄弟组合器…对于否决此选项的人，此答案有什么不正确/错误？我如何改进？我是否遗漏了什么？对于否决此选项的人，此答案有什么不正确/错误？我如何改进？我是否遗漏了什么？
.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);
}