Chrome 悬停错误 - 可能是固定位置，或第 n 个子原因

Posted 2023-03-06

【中文标题】Chrome 悬停错误 - 可能是固定位置，或第 n 个子原因

【英文标题】：Chrome Hover bug - possible fixed position, or nth child cause

【发布时间】：2014-10-27 10:35:31

【问题描述】：

我遇到了一个奇怪的 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" >
      </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;
    

【问题讨论】：

似乎在 OSX Chrome 37.0.2062.94 上按预期工作

可能是 z-index 错误？

@haxxxton 你在运行什么 OSX，我让我的朋友告诉我他也在使用 OSX Chrome 37，我正在运行 OSX 10.7.5 Chrome37，但运气不好

@Timothy 这是我最初的猜测之一，我完全从 .nav-global-container 中删除了 z-index 并且根本没有悬停。我在想可能是背景视频上的 z-index？

用你的代码制作一个 js 小提琴

【参考方案1】：

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