CSS li 悬停没有 li:after

Posted 2023-03-06

【中文标题】CSS li 悬停没有 li:after

【英文标题】：CSS li hover without 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;

但没有运气。

感谢您的回答。

【参考方案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，嗯？