Links haben keinen Hover-Effekt

Question

Ich bemerkte meine a-Tags haben keinen Hover aus irgendeinem Grund. Ich denke, es hat mit meinem Hintergrundvideo zu tun, das ich benutze, bin mir aber nicht sicher. Hier ist die JFiddle und beachten Sie, dass die roten Links keinen Schwebezustand haben.

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

Es ist wegen der z-index.

Entweder diese 2 Ansatz würde das beheben.

1. Machen Sie einfach Ihre Klasse .content zu z-index:-1.

.content { 
    z-index: -1; 
} 

2.Just Klasse .content-z-index:1 machen, und fügen Sie position:relative mit z-index:2 zu id #navigation.

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

Um mehr über z-index zu erfahren, überprüfen Sie es HERE.

Answer 2

Jef Code funktioniert, fügen Sie einfach diese zu:

#navigation ul li a:hover{ 
     color:red !important; 
    } 

Answer 3

Ändern Sie den "#navigation" css:

position: relative; 

und fügen Sie diese:

z-index: 1001; 

In Ihrem Code:

#navigation { 
    float: right; 
    margin-right: 100px; 
    margin-top: 30px; 
    position: relative; 
    z-index: 1001; 
} 

Answer 4

diese versuche ich den Code bearbeitet haben, müssen nur einige Pausen nach Menü hinzufügen, sonst u dies zu erreichen, zu sagen Marge auf das Video-Tag

*{ 
 
\t \t margin:0; 
 
\t \t padding:0; 
 
\t } 
 
\t 
 
\t body{ 
 
\t \t font-family:calibri,sans-serif; 
 
\t } 
 
\t 
 
\t .background-wrap{ 
 
\t \t position:fixed; 
 
\t \t z-index:-1000; 
 
\t \t width:100%; 
 
\t \t height:100%; 
 
\t \t overflow:hidden; 
 
\t \t top:0; 
 
\t \t left:0; 
 
\t } 
 
\t 
 
\t #video-bg-elem{ 
 
\t \t position:absolute; 
 
\t \t top:0; 
 
\t \t left:0; 
 
\t \t min-height:100%; 
 
\t \t min-width:100%; 
 
\t } 
 
\t 
 
\t .content{ 
 
\t \t position:absolute; 
 
\t \t width:100%; 
 
\t \t min-height:100%; 
 
\t \t z-index:1000; 
 
\t \t 
 
\t } 
 
\t 
 
\t .content h1{ 
 
\t \t text-align:center; 
 
\t \t font-size:65px; 
 
\t \t text-transform:uppercase; 
 
\t \t font-weight:300; 
 
\t \t color:red; 
 
\t \t padding-top:15%; 
 
\t \t margin-bottom:10px; 
 
\t } 
 
\t 
 
\t .content p{ 
 
\t \t text-align:center; 
 
\t \t font-size:20px; 
 
\t \t letter-spacing:3px; 
 
\t \t color:red; 
 
\t } 
 
\t 
 
\t #navigation{ 
 
\t \t float:right; 
 
\t \t margin-right:100px; 
 
\t \t margin-top:30px; 
 
\t } 
 
\t 
 
\t #navigation ul li{ 
 
\t \t float:left; 
 
\t \t margin-right:30px; 
 
\t } 
 
\t 
 
\t #navigation ul li a{ 
 
\t \t color:red; 
 
\t } 
 
    
 
    #navigation ul li a:hover{ 
 
\t \t color:green !important; 
 
\t } 
 
\t 
 
\t

<div id="navigation"> 
 
    <ul> 
 
    <li><a href="#">home</a></li> 
 
    <li><a href="#">home</a></li> 
 
    <li><a href="#">home</a></li> 
 
    </ul> 
 
</div> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<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 \t </video> 
 
</div> 
 
\t <div class="content"> 
 
\t \t <h1>Video Background Tutorial</h1> 
 
\t \t <p>This tutorial shows you how to put video as a background for your website.</p> 
 
\t </div>