Question

我正在尝试将Wordpress导航菜单项转换为css按钮。浏览器正在识别＃navigation-menu ul＆gt;的css代码。 li.menu-item-3226＆gt; a＆gt; span {...}所以正常的按钮状态看起来很好但是当我悬停时它无法识别＃navigation-menu ul＆gt; li.menu-item-3226＆gt; a：悬停＆gt; span {...}我使用的CSS语法不正确还是SOL？我无法更改生成的html，所以我只能修改CSS。

   CSS:
   #navigation-menu ul > li.menu-item-3226 > a > span{...}
   #navigation-menu ul > li.menu-item-3226 > a:hover span {... }
   #navigation-menu ul > li.menu-item-3226 > a:active span {...}

<div id="main-menu" class="pngfix">
<div id="dropdown-holder" class="container_24">
<div id="navigation-menu" class="navigation-menu">
<ul id="main-top-menu" class="sf-menu sf-js-enabled sf-arrows">
    <li id="menu-item-1021" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-86 current_page_item menu-item-1021">
    <li id="menu-item-3226" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3226">
        <a href="http://www.example.com/">
            <span>Order</span>
        </a>
    </li>
</ul>
</div>
</div>
</div>

Answer 1

只需将缺少的>添加到悬停样式，它就应该这样做。

#navigation-menu ul > li.menu-item-3226 > a:hover > span {... }

Answer 2

你的HTML搞砸了（第一个<li>没有关闭），但你的CSS似乎工作正常（参见：http://jsfiddle.net/7w8eecov/）。

此外，课程需要找到<li>吗？ #navigation-menu ul li a:hover span {}不起作用吗？

识别a：使用<span> </span>进行悬停

2 个答案: