如何让整个标签一致行动？

Question

我想知道当指针悬停在标签上时，如何让标签与其中的图标一致行动。我想要什么是蓝色变成白色，什么是白色变成蓝色。

当我将鼠标悬停在标签上时，我想让图标变换并被看到。

问题： 截至目前，当指针进入标签时，它完全变为蓝色，覆盖图标。我必须将鼠标悬停在图标上才能显示。

Full code is here

<div class="container">
<div class="row">
    <div class="board-inner">
        <ul class="nav nav-tabs" id="myTab">
            <div class="liner"></div>
            <li class="active">
                <a href="#pictures" data-toggle="tab">
                    <span class="round-tabs one"><i class="fa fa-camera-retro fa-lg"></i></span></a>
            </li>
                      <br><br> <br> 
            <li>
                <a href="#info" data-toggle="tab">
                    <span class="round-tabs"><i class="fa fa-info fa-lg"></i></span> 
                </a>
            </li>
        </ul>
    </div> 
</div>

Answer 1

您只需要更改一些悬停选择器

Here is the fiddle

改变这个：

.board-inner li a span .fa-lg:hover { 
color: #fff;
}

对此：

.board-inner li a span:hover .fa-lg { 
color: #fff;
}