Question

有JSFidle link不起作用，此处已更新，但有效但不完整Another JSFidle link

区别在于

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

当我向其他div添加<a>标记时，它会从.nav-irin g第一个孩子中突出显示。怎么了？

Answer 1

将您的n-child放在锚标记上，并将锚标记添加到所有4个圆div中。但目标就像

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

}

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

喜欢这个

更改href我刚刚做了一个例子