Question

我在Wordpress网站上工作，并没有完全遵循给我的html和CSS。

我有一条规则，说明当菜单项悬停时，将订单项的背景设为橙色，将嵌套的锚文本设为白色：

.dropdown > ul li:hover, .dropdown ul li.current_page_item {
background-color: rgba(255,165,0,0.4);

然后：

.dropdown ul li a, .dropdown ul a { // because there are nested drop down menus
display: block;}

第一条规则有效，第二条规则没有。使用inspect元素功能我注意到，当我应用此规则时，它会被评分。当我应用规则outline: solid 1px来查看嵌套锚时，当我的目标是使其与大小相匹配时，它确实小于父线项。

以下是导航：http://jsfiddle.net/hfnjgjxf/

请注意，当您将鼠标悬停在菜单项上时，只有将鼠标悬停在中心（内部a标记）上时，文字才会变为白色。内部a标记应与父标记的大小相同，以便在悬停时，文本在行项目的任何部分变为白色。

希望我能说话。如果你看小提琴，你会明白我的意思。

Answer 1

由于列表项没有明确的width和/或height，我们无法正确更改锚标记的大小以填充每个列表的整个空间。< / p>

但是，您可以通过在锚标记上添加填充而不是列表项来实现：

<强> EXAMPLE HERE

.dropdown ul li {
    /* padding: 7px 10px; */ /* Remove this declaration */
    border: none;
    border-right:2px solid lightblue;
    background-color: transparent;
}

.dropdown ul li a {
    display: block;
    padding: 7px 10px; /* Add this instead */
}

Answer 2

在这种情况下，不需要使锚元素与其父元素具有相同的大小，而只是根据父元素的悬停将效果应用于锚点。您可以通过更改选择器以匹配li悬停而不是a悬停来实现这一目标。

.dropdown > ul li:hover > a {
    color: white;
}

http://jsfiddle.net/hfnjgjxf/2/

努力使嵌套锚与父线项目大小相同

2 个答案: