CODEWITHSUNDEEP
htmlcss
Ralphunreal
Ralphunreal

Reputation: 193

links do not have a hover effect

I noticed my a tags have no hover for some reason. I am thinking it has to do with my background video that I am using but not sure. Here is the jsfiddle and notice the red links have no hover.

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;
}

Upvotes: 0

Views: 55

Answers (4)

Ganesh Putta
Ganesh Putta

Reputation: 2681

Try this i have edited your code, just need to add some breaks after menu , else u achieve this with saying margin to the video tag

*{
		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:red;
		padding-top:15%;
		margin-bottom:10px;
	}
	
	.content p{
		text-align:center;
		font-size:20px;
		letter-spacing:3px;
		color:red;
	}
	
	#navigation{
		float:right;
		margin-right:100px;
		margin-top:30px;
	}
	
	#navigation ul li{
		float:left;
		margin-right:30px;
	}
	
	#navigation ul li a{
		color:red;
	}
  
  #navigation ul li a:hover{
		color:green !important;
	}
	
	
<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	</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>

Upvotes: 0

Jefsama
Jefsama

Reputation: 553

It is because of z-index.

Either this 2 approach would fix that.

1.Just make your class .content to z-index:-1 .

.content {
  z-index: -1;
}

2.Just make your class .content to z-index:1 and add position:relative with z-index:2to id #navigation .

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

To learn more about z-index, check it HERE.

Upvotes: 2

Shon Levi
Shon Levi

Reputation: 148

Change the "#navigation" css:

position: relative;

and add that:

z-index: 1001;

In your code:

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

Upvotes: 0

Joseph Charnin
Joseph Charnin

Reputation: 140

Jef's code works, just add this too:

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

Upvotes: 0

Related Questions