2016-07-14 5 views
0

Я заметил, что по каким-то причинам у моих тегов нет зависаний. Я думаю, что это связано с моим фоновым видео, которое я использую, но не уверен. Вот 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; 
} 

ответ

2

Это из-за z-index.

Либо этот 2 подход исправит это.

1. Просто сделайте свой класс .content до z-index:-1.

.content { 
    z-index: -1; 
} 

2.Just сделать свой класс .content к z-index:1 и добавить position:relative с z-index:2 к идентификатору #navigation.

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

Чтобы узнать больше о z-index, проверить его HERE.

0

код Джеф работает, просто добавьте это тоже:

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

Измените "#navigation" CSS:

position: relative; 

и добавить, что:

z-index: 1001; 

В коде:

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

Попробуйте это я редактировал свой код, нужно просто добавить некоторые перерывы после меню, иначе у этого добиться с высказыванием маржи видео тэга

*{ 
 
\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>

Смежные вопросы