简体   繁体   中英

Chrome Hover bug - possible fixed position, or nth child cause

I Am experiencing a weird bug with chrome, I have my nav fixed to top and have a hover affect applied using first-child, nth-child, and last child. Hover effect works at first but as soon as you scroll it is as if the hover scrolls up with it. Only having problems with chrome, it works fine in firefox, IE9+, safari 5+. Thanks in advance!

Here is the link where the demo site can be seen 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;
    }
}

将.nav-global-container的z-index设置为3,将.video-dot-overlay设置为2,将.fullscreen-video设置为1可以为我解决(在开发工具中试用)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM