CSS li 悬停没有 li:after答案

【问题标题】：CSS li hover without li:afterCSS li 悬停没有 li:after
【发布时间】：2013-08-28 16:53:15
【问题描述】：

我有菜单，我在其中使用 :after 元素。我将 li 悬停在菜单中，但它悬停在 :after 元素上。

HTML：

<ul class="main-menu">
    <li class="active"><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
</ul>

CSS：

/* MAIN MENU */
.main-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    background: url("../img/li.png") repeat-x; height: 56px;
}
.main-menu li {
    display: inline-block;
    color: #fff;
    height: 56px;
    background: url("../img/li.png") repeat-x; height: 56px;
    line-height: 56px;
}
.main-menu li:after {
    content: "|";
}
.main-menu li:last-child:after {
    content: "";
}
.main-menu li:hover {
    background: url("../img/li-hover.png") repeat-x; height: 56px;
}
.main-menu .active {
    background: url("../img/li-hover.png") repeat-x; height: 56px;
}
.main-menu li a {
    text-decoration: none;
    color: #d2eff3;
    padding: 10px;
}
.main-menu li a:hover {

}

JsFiddle：

JsFiddle example

问题：

如何从悬停效果中排除li:after 元素？

（在菜单中悬停效果是悬停在“|”分隔符下。我想禁用悬停在分隔符下）

我试过了：

.main-menu li:after:hover {
    background: none;
}

但没有运气。

感谢您的回答。

【问题讨论】：

标签： html css hover html-lists

【解决方案1】：

我认为悬停效果应该在链接而不是整个li元素http://jsfiddle.net/krasimir/fC8sb/6/

.main-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    background: url("...") repeat-x; height: 56px;
}
.main-menu li {
    padding: 0;
    margin: 0;
    display: inline-block;
    color: #fff;
    height: 56px;
    background: url("../img/li.png") repeat-x; 
}
.main-menu li:after {
    padding: 14px 0 0 4px;
    content: "|";
    float: right;
    display: block;
}
.main-menu li:last-child:after {
    content: "";
}
.main-menu li:hover a {
    background: url("...") repeat-x; height: 56px;
}
.main-menu .active {
    background: url("../img/li-hover.png") repeat-x; height: 56px;
}
.main-menu li a {
    text-decoration: none;
    color: #d2eff3;
    padding: 10px;
    display: block;
    float: left;
    padding: 16px 10px 10px 10px;
}

【讨论】：

解决方案：悬停效果应该在链接而不是整个li元素上 +1

【解决方案2】：

将:after 元素置于li 之外。我在示例中通过添加以下代码来做到这一点：

li {
    position:relative;
}

li:after {
    position:absolute;
    right:-3px;
}

见：http://jsfiddle.net/fC8sb/1/

【讨论】：

【解决方案3】：

应用这样的样式：

.main-menu li:hover::after  {
    background:red;
}

FIDDLE

【讨论】：

【解决方案4】：

将position: relative; 和left: a 添加到您的li:after，以便将:after 元素从li 框中移开。

接下来，将一些margin-right: a*2 添加到您的li，这样li:after 元素就不会只是移动到下一个menu-item。

希望对您有所帮助。

编辑 - 只是为了确保：用数字替换 a 和 a*2，嗯？

【讨论】：