z-index属性在悬停菜单链接上不起作用 [英] z-index property doesn't work on hover menu links

问题描述

我制作了一个菜单栏，并在悬停上自定义了效果.我希望链接文本位于顶层.问题是，即使将链接的z-index设置为999，当我将鼠标悬停在菜单中的链接上时，三角形也会覆盖示例所示的文本.

I made a menu bar, and custom effect on hover. I wanted the link text to be on top layer. Problem is that when I hover the link in menu, the triangle overlays the text as shown in example, even though I set the z-index of a link to 999.

<div id="menu">             
    <ul>
        <li><a href="#home">yyyyyy</a></li>
        <li><a href="#news">ppppppp</a></li>
        <li><a href="#contact">ggggggg</a></li>
        <li><a href="#about">jjjjjjjj</a></li>
    </ul>                           

Jsfiddle: https://jsfiddle.net/z5zLL1kn/

Jsfiddle: https://jsfiddle.net/z5zLL1kn/

#menu{
    height:50px;
    background-color:#fff8dc;   
    border-bottom:1px #ff8888;}

ul {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    height:50px;
    background-color: #fff8dc;
    width:450px;
}

li { float: left; }

li a {  
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 44px;  
    display: block;
    color: #ff1636;
    text-align: center;
    border-bottom:1px #ff8888;
    text-decoration: none;
    height:49px;
    position: relative;
    padding-left:15px;
    padding-right:15px;
    z-index:100;
}

li a:hover:after {
    content: "";
    display: block;
    border: 10px solid #fff8dc;
    border-bottom-color: #ff8888;   
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -10px;
    margin-bottom:1px;
}

推荐答案

您的问题是::after伪元素被认为是a元素的一部分一部分，因此更改了<锚点的c0>也将应用于伪元素.

Your problem is that the ::after pseudo element is considered a part of the a element, and so changing the z-index of the anchor, will also apply to the pseudo element.

一种快速的解决方案是将箭头伪元素移至列表项而不是链接.

A quick solution would be to move the arrow pseudo element to the list item instead of the link.

正在使用jsFiddle

li {
  position: relative;
}

li a {
  position: relative;
  z-index:2;
}

li:hover::after {
  position: absolute;
}

---

另一种解决方案:

正如Roko C. Buljan在评论中提到的那样，更直接的解决方案可以是正确构建箭头伪元素(第二种border颜色需要为transparent，而不是背景颜色:

---

Another solution:

As Roko C. Buljan mentioned in the comments, a more straight-forward solution can be to build the arrow pseudo element properly (the second border color needs to be transparent, instead of the background's color:

li a:hover:after {
  border: 10px solid transparent;
  border-bottom-color: #ff8888; 
}

正在使用jsFiddle

这篇关于z-index属性在悬停菜单链接上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！