2

我有菜单，我在其中使用 :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 示例

问题：

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

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

我试过了：

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

但没有运气。

谢谢您的回答。

4

4 回答 4

3

我认为悬停效果应该在链接上而不是在整个 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;
}
于 2013-08-26T08:56:56.913 回答
1

应用这样的样式：

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

小提琴

于 2013-08-26T08:57:05.930 回答
1

:after将元素定位在li. 我在示例中通过添加以下代码来做到这一点：

li {
    position:relative;
}

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

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

于 2013-08-26T08:55:00.410 回答
1

添加一个position: relative;andleft: a使li:after:after 元素远离 li 框。

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

希望有帮助。

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

于 2013-08-26T09:03:55.383 回答