Question

我的box-shadow上有一个.nav-item:hover。不幸的是，阴影被其他元素覆盖/隐藏。我尝试在z-index上设置positon:relative和.nav-item，但这并不能解决我的问题。

任何想法我做错了什么？ http://higps.org:8000/pitoNew/

Answer 1

好的，你在元素上混合了太多z-index。您需要在z-index课程上应用.brick。

#header [class*="brick"] {
   position: relative;
}

#header [class*="brick"]:hover {
   z-index: 100;
}

#header .nav-item {
   display: block;
   width: 100%;
   height: 100%;
   text-align: center;
   font-size: 19.2px;
   text-decoration: none;
}

#header a.nav-item:hover,
#header a.nav-item:focus {
   box-shadow: 0 0 0 8px rgba(255,255,255,0.5);
   color: #fff;
}

并从z-index div中的元素中删除所有.brick属性。

Answer 2

从鼠标悬停的box-shadow标记中移除a，并将box shadow添加到鼠标悬停的包装div

尝试使用以下css代码

    #header [class*="brick"]{
      position: relative;   
    }

    #header .brick1:hover{
      box-shadow: 0 0 0 8px rgba(255,255,255,0.5);
      z-index: 1010;
    }

CSS框阴影隐藏

2 个答案: