javascript - 我想根据悬停事件将动画选项卡添加到网格元素

Question

编辑：弄清楚为什么悬停不起作用。选项卡容器的 z-index 低于导航菜单，因此位于较低的堆栈层次结构中。

我仍然希望有人能就 num 2 - 导航窗口上的选项卡响应式放置提供好的建议。

1. 我已经有一个网格元素悬停工作（ div 形状为按钮），但悬停在选项卡上不起作用。

2. 该选项卡未在导航窗口上方垂直对齐。有没有办法确保它会？

scss（菜单项）：

.menuItem1,.menuItem2,.menuItem3{
width: 100%;
position: relative;
z-index: auto;
display: grid;
grid-template-rows: repeat(10,1fr);
grid-template-columns: repeat(12,1fr);
align-items: stretch;
margin: 1rem 0;
height: 10rem;
@include BgImg;

&__Text{
    transition: transform 0.5s ease-in;
    text-align: center;
    background-color:$ColorBtnBg;
    color: #0D24BE;
    grid-column: 3 / span 8;
    grid-row: 6 / span 3;
    border-radius: 5rem;
    border-width: 3px;
    font-size: 1.1rem;
    font-weight: bold;
    
    @include shadowAllsides;
}

scss（我尝试创建的选项卡）：

.menuItem1__bookmarkTabs{
    top: 0;
    z-index: 9;
    position: relative;
    background-color: red;
    grid-column: 2 / span 7;
    grid-row: [row1-start] / span 2;
    display: flex;
    } .menuItem1__bookmarkTabs__Tab{
    display: block;
    position: relative;
    z-index: 10;
    flex: 1 0 5rem;
    margin: 0 0.5rem;
    background-color: green;
    text-align: center;
    border-radius: 20px 20px 0 0;
    transition: transform 0.3s ease-in;
    font-size: 0.2rem; } .menuItem1__bookmarkTabs:hover{
    transform: scale(3); }

html:

<nav class="navSideBar">
        <div class="menuItem1">
           <a href="#" class="menuItem1__Text">-</a>
           <div class="menuItem1__bookmarkTabs"> 
                <a href="#" class="menuItem1__bookmarkTabs__Tab">-</a>
                <a href="#" class="menuItem1__bookmarkTabs__Tab">-</a>
           </div>
        </div>
      
        <div class="menuItem2">
            <a href="#" class="menuItem2__Text">-</a>
        </div>
        <div class="menuItem3">
            <a href="#" class="menuItem3__Text">-</a>
        </div>
  </nav>

标签： javascripthtmlanimationsass