html - CSS - 当我们将鼠标悬停在 paren 上时，将样式应用于绝对元素 child

Question

我正在尝试将样式应用于无序列表中绝对位于 标签内的元素，想法是通过将鼠标移到主要父元素上可以将自定义样式应用于所有元素具有绝对位置的子元素。

在示例中我们可以看到，当鼠标悬停在主要元素上时，为没有绝对位置的元素正确应用的样式，但 不受影响，并且是此元素我也需要换蓝色。

这里的例子: http://jsfiddle.net/milindex/en8oaLct/

ul.menu {
    margin: 40px 0 0 0;
    padding:0;
}
ul.menu li{
    margin: 0;
    padding:0;
}

ul.menu li a {
    margin: 3px 0;
    padding:10px 20px;
    list-style:none;
    display: block;
    background: #FBFBFB;
    font-family: tahoma;
    font-size:13px;
    position: relative;
    text-decoration: none;
    color:#202020;
    
}

ul.menu li a:hover {
    background: #EEE;
    color: blue
}

ul.menu li a > i {
    position: absolute;
    right:20px;
    top:13px;
    color:#7AB900;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="menu">
    <li>
        <a href="#">
            Item 1
            <i class="fa fa-check-square-o"></i>
        </a>
    </li>
    <li>
        <a href="#">
            Item 2
            <i class="fa fa-check-square-o"></i>
        </a>
    </li>
    <li>
        <a href="#">
            Item 3
            <i class="fa fa-check-square-o"></i>
        </a>
    </li>
</ul>

Answer 1

您当前的样式为 i 元素设置了颜色，您只需要在父元素悬停时设置该样式，如下所示:

ul.menu li a:hover > i {
    color: blue;
}

ul.menu {
    margin: 40px 0 0 0;
    padding:0;
}
ul.menu li{
    margin: 0;
    padding:0;
}

ul.menu li a {
    margin: 3px 0;
    padding:10px 20px;
    list-style:none;
    display: block;
    background: #FBFBFB;
    font-family: tahoma;
    font-size:13px;
    position: relative;
    text-decoration: none;
    color:#202020;
    
}

ul.menu li a:hover {
    background: #EEE;
    color: blue
}

ul.menu li a > i {
    position: absolute;
    right:20px;
    top:13px;
    color:#7AB900;
}

ul.menu li a:hover > i {
    color: blue;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="menu">
    <li>
        <a href="#">
            Item 1
            <i class="fa fa-check-square-o"></i>
        </a>
    </li>
    <li>
        <a href="#">
            Item 2
            <i class="fa fa-check-square-o"></i>
        </a>
    </li>
    <li>
        <a href="#">
            Item 3
            <i class="fa fa-check-square-o"></i>
        </a>
    </li>
</ul>