html - Bootstrap 3 选项卡悬停样式问题

Question

我在将这 2 种悬停样式“组合”在一起执行时遇到问题，如果有人能看一下就太好了。

http://jsfiddle.net/H8vUW/

我需要这些悬停:

.services-icon:hover {
color: #fff;
cursor: pointer;
}

.services-icon-holder:hover {
background: #272727;
cursor: pointer;
}

当用户将鼠标悬停在每个选项卡名称(设计、网上商店、社交等)上时激活

我还通过增加图标的高度和宽度，使图标在悬停在圆圈时变成白色，但这对我来说有点笨拙，例如，当您将鼠标移到刚好开始的地方时圆圈图标没有变白!

这是一个事件和悬停的例子:http://aliensix.com/lightningbolt/example.jpg

Active 有箭头，hover 没有箭头。

Answer 1

这里 FIDDLE .

您必须在 holder 悬停时触发两个 css。当您将鼠标悬停在图标上时，这也会自动触发父项的悬停。

.services-icon-holder:hover {
    background: #272727;
    cursor: pointer;
    width: 60px;
    height: 60px;
}

.services-icon-holder:hover .services-icon {
    color: #fff;
    cursor: pointer;
}