Question

我遇到了一个奇怪的Chrome错误，我将导航器固定在顶部，并使用第一个孩子，第n个孩子和最后一个孩子应用了悬停效果。悬停效果首先起作用但滚动后就像悬停向上滚动一样。只有chrome问题，它在firefox，IE9 +，safari 5+中运行良好。提前谢谢！

以下是可以看到演示网站的链接http://www.digitaldripmedia.com/vans

HTML -

<header id="header">
  <nav class="nav-global-container">
    <div class="logo">
      <a href="/">
        <img src="images/warped-tour-logo.png" alt="Vans Warped Tour Logo">
      </a>
    </div>
    <ul class="nav-global">
      <li class="nav-items"><a href="/">Home</a></li>
      <li class="nav-items"><a href="#">Lineup</a></li>
      <li class="nav-items"><a href="#">Blog</a></li>
    </ul>
  </nav>
</header>

SCSS -

.nav-global-container {
    width: 100%;
    height:9em;
    position: fixed;
    top:0;
    left:0;
    z-index: 800;
    background-color: $black;
}

.logo{
    width: 6.5em;
    margin:$center;
    margin-top:1em;

    img{
        width: 100%;
    }

}

.nav-global{
    @extend %clearfix;
    padding: 0;
    margin: 0;
}

.nav-items{
    display:block;
    width:33.3333333%;
    padding:5px;
    border-right: 1px solid white;
    float:left;
    @include font-style('tex',16px,white);
    text-align: center;


    &:first-child{
        border-top: 4px solid $cool-gray;
            @include transition(background-color .3s ease);
            &:hover {
                background-color:$cool-gray;
            }
    }

    &:nth-child(n+2){
        border-top: 4px solid $red;
        @include transition(background-color .3s ease);
            &:hover {
                background-color:$red;
            }
    }

    &:last-child{
        border-top: 4px solid $navy;
        border-right:none;
        @include transition(background-color .3s ease);
            &:hover {
                background-color:$navy;
            }
    }


    a{
        display: block;
        width: 100%;
        height:100%;
        color:white;
    }
}

Answer 1

将.nav-global-container上的z-index设置为3，将.video-dot-overlay设置为2，将.fullscreen-video设置为1为我解决（在开发工具中尝试过）

Chrome Hover bug - 可能的固定位置或第n个孩子原因

1 个答案: