html - <A> TAG悬停时出现奇怪问题

Question

有一个JSFidle 链接不工作，这里更新了工作但不完整的另一个 JSFidle 链接

区别就在那里

<a href="#social">                  
    <div id="b-social" class="navi-ring"><p>Social</p></div>
</a>

<a>标记使其从 css 中突出显示错误

.navi-ring:nth-child(2):hover{
    background-color: #0C95C7;
}

它确实突出，但从此

.navi-ring:nth-child(1):hover{
    background-color: rgb(253,225,100);
}

同样，当我将<a>标签添加到其他 div 时，它会从.nav-iring 第一个孩子中突出显示。怎么了？

Answer 1

将您的第 n 个孩子放在锚标签上，并将锚标签添加到所有 4 个圆圈 div。但是像这样瞄准他们

#brain-menu a:nth-child(x):hover navi-ring {

}

你的第二个小提琴有效，因为圈 2-4 在同一个容器下

像这样

http://jsfiddle.net/BY5vQ/2/

更改href我刚刚做的例子