css - 没有包装器的 2 个单独的菜单元素上的同时 CSS 悬停效果？

Question

虚构公司的导航菜单如下：

该公司专门生产“螃蟹坐”，但还提供另外两项针对人们的节肢动物宠物的服务。

已经决定导航中“服务”的链接应该立即指向“宠物蟹坐”——没有关于他们服务的一般页面。

使用 HTML 很容易做到这一点：

<ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/services/crab-sitting/">Services</a>
        <ul>
            <li><a href="/services/crab-sitting/">Crab Sitting</a></li>
            <li><a href="/services/polishing-crustacean-shells/">Polishing Crustacean Shells</a></li>
            <li><a href="/services/massages-for-anthropods/">Massages for Anthropods</a></li>
        </ul>
    </li>
    <li><a href="/contact/">Contact</a></li>
</ul>

但从用户体验的角度来看，需要改变两者的翻转效果来澄清两者会导致一个地方。

换句话说，使两个列表元素看起来是一个链接。

如何:hover在不牺牲 HTML 语义的情况下，使用 CSS 同时实现“服务”和“坐蟹”的效果？

Answer 1

你能做的最好的就是：

http://jsfiddle.net/ZVUu2/2/

a.blah:hover
    {color: red;}

a.blah:hover + ul > li > a.blah
    {color:red;}

<ul>
    <li><a href="/">Home</a></li>
    <li><a class="blah" href="/services/crab-sitting/">Services</a>
        <ul>
            <li><a class="blah" href="/services/crab-sitting/">Crab Sitting</a></li>
            <li><a href="/services/massages-for-anthropods/">Massages for Anthropods</a></li>
        </ul>
    </li>
</ul>

Answer 2

否则，您也可以从 href 过滤：
这样，类似的 href 链接所在的位置并不重要，只要它是相邻 ul 内的孩子。
http://jsfiddle.net/GCyrillus/b5Lzn/

[href*="crab-sitting"]:hover,  [href*="crab-sitting"]:hover + ul [href*="crab-sitting"] {
    background:green;
}

如果在第二个链接中，您忘记了 href 上的最后一个斜线，它仍然有效； http://jsfiddle.net/GCyrillus/b5Lzn/1/

<li><a href="/services/crab-sitting/ ">Services</a>
        <ul>
            <li><a href="/services/crab-sitting ">Crab Sitting</a></li>

Answer 3

li:hover{
 This is for the event on the main li
}

li:hover ul li:first-child{
 here you have selected the first element of the nested ul when the main li is hovered
}

快乐编码