当悬停其他<li> </li> </span>时，更改第一个li a <span>的样式

Question

任何人都知道在悬停其他<span>时如何在<li>前更改<li>'s .class？

jsfiddle

Answer 1

也许你可以这样做：http://jsfiddle.net/AndyMardell/x63sjugq/

HTML

<div class="navbar">
    <ul>
        <li> 
            <ul>
                <li> 
                    <a href="#temp1-videos">Solo Videos</a> 
                </li>
                <li> 
                    <a href="#temp1-videos">Team Videos</a> 
                </li>
            </ul>
            <a href="#Videos" class="border-left-menu caret">Videos</a>
        </li>
        <li> 
            <a href="#photo_galleries" class="border-right-menu">Photos</a>
        </li>
    </ul>
</div>

CSS

.navbar ul li a.caret:after {
    background: blue;
    content: 'TEST';
}

.navbar ul li ul:hover + a.caret:after {
    background:red;
}

对于伪类有点hacky：之后，“视频”按钮必须在之后你的孩子ul，但我希望这绝对定位或者什么？将“TEST”替换为之前span标记中的内容。