html - 链接没有悬停效果

Question

我注意到我的 a 标签由于某种原因没有悬停。我认为这与我正在使用但不确定的背景视频有关。这是 jsfiddle，请注意红色链接没有悬停。

jsfiddle

<div id="navigation">
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
    </ul>
</div>
<div class="background-wrap">       
    <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
        <source src="north.mp4" type="video/mp4">
        Video not supported
    </video>
</div>  
<div class="content">
    <h1>Video Background Tutorial</h1>
    <p>This tutorial shows you how to put video as a background for your website.</p>
</div>


*{
    margin:0;
    padding:0;
}

body{
    font-family:calibri,sans-serif;
}

.background-wrap{
    position:fixed;
    z-index:-1000;
    width:100%;
    height:100%;
    overflow:hidden;
    top:0;
    left:0;
}

#video-bg-elem{
    position:absolute;
    top:0;
    left:0;
    min-height:100%;
    min-width:100%;
}

.content{
    position:absolute;
    width:100%;
    min-height:100%;
    z-index:1000;       
}

.content h1{
    text-align:center;
    font-size:65px;
    text-transform:uppercase;
    font-weight:300;
    color:#fff;
    padding-top:15%;
    margin-bottom:10px;
}

.content p{
    text-align:center;
    font-size:20px;
    letter-spacing:3px;
    color:#aaa;
}

#navigation{
    float:right;
    margin-right:100px;
    margin-top:30px;
    width:400px;
}

#navigation ul li{
    float:left;
    margin-right:30px;
}

#navigation ul li a{
    color:white;
}

Answer 1

这是因为z-index。

这两种方法都可以解决这个问题。

1.只需将您的类(class) .content 设置为 z-index:-1 。

.content {
  z-index: -1;
}

2.只需将您的类(class) .content 设为 z-index:1 并添加 position:relative使用 z-index:2 到 id #navigation 。

.content {
  z-index: 1;
}
#navigation {
  position:relative;
  z-index: 2;
}

要了解有关 z-index 的更多信息，请查看 HERE .