Question

我的菜单元素悬停有问题。悬停在该元素上时，我无法看到该文本。我使用z-index将文本置于顶部，但不起作用。

我的代码，

HTML：

<div class="menu">
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Business Verticals</a></li>
  <li><a href="#">Solutions</a></li>
  <li><a href="#">Solution Partners</a></li>
  <li><a href="#">Contact Us</a></li>
 </ul>
 </div>

的CSS：

.menu{float:right;margin: -10px 0 0;}
.menu ul li{list-style:none;float:left;border-left:1px solid #e7e7e7;border-right:1px solid #e7e7e7;padding: 10px;}
.menu ul li a {
color: #000;float: left;padding: 15px 10px;position: relative;text-decoration: none;
 z-index:10;}
 .menu ul li a:hover{color:#fff;}  
.menu ul li a:hover::before, .menu ul li a:hover::after {
border-bottom: 6px solid green;
content: "";
height: 100%;
background: green;
position: absolute;
top: -5px;
color:#fff;
z-index:5;
width: calc(50% + 6px);
border-color: green green -moz-use-text-color;
border-image: none;border-style: solid solid none;border-width: 3px 3px medium;}

.menu ul li a:hover::before {
left: -12px;
transform: skewY(5deg);
color:#fff;
 }
.menu ul li a:hover::after {
left: 49%;
transform: skewY(-5deg);
color:#fff;
}

Answer 1

在

中使用z-index

.menu ul li a:hover::before { }

和

.menu ul li a:hover::after { }

正在使用 Demo

无法在悬停时看到文字

1 个答案: