伪元素状态 - 如何将样式附加到 after/before 的状态？

Question

在开始预览代码之前，我想让您更接近我目前所处的环境。我正在尝试生成一个具有不同 tab- 的菜单像“开始、群组、帮助等”这样的部分。让我们 select 只是居中的 tab-button，Groups.. 悬停时看起来像这样：

一旦我输入一个我用来构建 45deg 边的伪元素，父元素的悬停样式 div 关闭。但假货仍然可见：

注意：我无法操作 html 标记。我可以对站点进行更改的唯一方法是编辑 css.. 让我们看一下代码：

#header .nav-item {
    width: 33.33%;
}    

#header .nav-item:hover::before,
#header .nav-item:hover::after {
    display: inline-block;
    position: absolute;
    height: 50px;
    width: 50px;
}

#header .nav-item:hover::before {
    margin-left: -25px;
    background-image: -webkit-gradient(
        linear, right top, left bottom,
        color-stop(0.5, #111),
        color-stop(0.5, #fff));
    /* vendor specific gradients ... */
}

#header .nav-item:hover::after {
    margin-left: -25px;
    background-image: -webkit-gradient(
        linear, right top, left bottom,
        color-stop(0.5, #fff),
        color-stop(0.5, #111));
    /* vendor specific gradients ... */
}

让我们转到...

我的问题

我可以 select 伪元素状态 :hover 还是有任何其他可用的方法来实现干净的过渡，同时在项目中移动？到目前为止，我尝试了 select .nav-item::after:hover、.nav-item::before:hover、.nav-item:hover::after:hover 和 .nav-item:hover::before:hover ...

没有任何效果，所以我目前无法强制伪元素在悬停时做某事..

提前致谢...

编辑 - 解决方案

要强制伪元素在悬停时不可见，只需使用 z-index 在其上方放置另一个元素（例如 a、'span'、...） .

谢谢 @Merijn van Wouden ;)

Answer 1

只将鼠标悬停在 .nav-item 上，而不是伪元素上悬停在 .nav-item 上还控制是否显示伪元素。

看：https://jsfiddle.net/xqe3vqmt/1/

编辑： 更新版本：https://jsfiddle.net/xqe3vqmt/2/（见下面的评论）

另请注意我是如何使渐变变得不必要的

HTML:

<div id="header"> 
    <a class="nav-item">START</a>
    <a class="nav-item">GRUPPEN</a>
    <a class="nav-item">HILFE</a>
</div>

CSS:

#header {
    margin-top:2em;
}
.nav-item {
    width: 120px;
    display:inline-block;
    position:relative;
    font-family:arial, helvetica;
    text-align:center;
    height:3em;
    line-height:3em;
    margin:0 1.5em;
    cursor:pointer;
}
.nav-item:before, .nav-item:after {
    content:"";
    width:0;
    height:0;
    border:1.5em solid transparent;
    position:absolute;
    top:0;
}
.nav-item:before {
    right:100%;
}
.nav-item:after {
    left:100%;
}
.nav-item:hover {
    background:black;
    color:white;
}
.nav-item:hover:before {
    border-right-color:black;
    border-top-color:black;
}
.nav-item:hover:after {
    border-left-color:black;
    border-bottom-color:black;
}

伪元素状态 - 如何将样式附加到 after/before 的状态？

Pseudo-Element state - How to append a style to the state of after/before?

css

css-selectors

pseudo-class

pseudo-element

我的问题

编辑 - 解决方案