Тема: Не працює :hover в CSS
Не працює :hover, валідатори нічого не знайшли. Допоможіть!
Код html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Page</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- HEADER -->
<header class="header">
<div class="container">
<h1>Main Header Here</h1>
<h2>
<small>And small sub header</small>
</h2>
</div>
</header>
<!-- /HEADER -->
<!-- NAVIGATION -->
<nav class="page-navigation">
<div class="container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contacts</a></li>
</ul>
<!-- LOGIN FORM -->
<form action="#" class="login">
<input type="text" placeholder="Login" required>
<input type="password" placeholder="Password" required>
<input type="submit" value="Sing In">
</form>
<!-- /LOGIN FORM -->
</div>
</nav>
<!-- /NAVIGATION -->
<!-- MAIN SECTION -->
<main>
<div>
<h2>Image Collection <small>Visualize Quality</small></h2>
<div>
<div>
<div>
<img src="images/profile.jpg" alt="List picture" width="300" height="">
<div>
<h3>List Element Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare nulla non quam pretium, id porta felis dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris pharetra metus convallis, condimentum odio a, eleifend arcu. Vivamus sed iaculis massa. In hac habitasse platea dictumst. Nullam sollicitudin odio non hendrerit tempus. In pulvinar molestie libero in sagittis. Donec at nunc vitae urna commodo tempor in nec dui.
</p>
<button>Read More...</button>
</div>
</div>
</div>
<div>
<div>
<img src="images/profile.jpg" alt="List picture" width="300" height="">
<div>
<h3>List Element Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare nulla non quam pretium, id porta felis dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris pharetra metus convallis, condimentum odio a, eleifend arcu. Vivamus sed iaculis massa. In hac habitasse platea dictumst. Nullam sollicitudin odio non hendrerit tempus. In pulvinar molestie libero in sagittis. Donec at nunc vitae urna commodo tempor in nec dui.
</p>
<button>Read More...</button>
</div>
</div>
</div>
<div>
<div>
<img src="images/profile.jpg" alt="List picture" width="300" height="">
<div>
<h3>List Element Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare nulla non quam pretium, id porta felis dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris pharetra metus convallis, condimentum odio a, eleifend arcu. Vivamus sed iaculis massa. In hac habitasse platea dictumst. Nullam sollicitudin odio non hendrerit tempus. In pulvinar molestie libero in sagittis. Donec at nunc vitae urna commodo tempor in nec dui.
</p>
<button>Read More...</button>
</div>
</div>
</div>
</div>
<h2>Video Collection <small>Visualize Quality</small></h2>
<div>
<div>
<div>
<video controls>
<source src="video/movie.mp4" type="video/mp4">
</video>
<div>
<h3>List Element Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare nulla non quam pretium, id porta felis dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris pharetra metus convallis, condimentum odio a, eleifend arcu. Vivamus sed iaculis massa. In hac habitasse platea dictumst. Nullam sollicitudin odio non hendrerit tempus. In pulvinar molestie libero in sagittis. Donec at nunc vitae urna commodo tempor in nec dui.
</p>
<button>Read More...</button>
</div>
</div>
</div>
<div>
<div>
<video controls>
<source src="video/movie.mp4" type="video/mp4">
</video>
<div>
<h3>List Element Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare nulla non quam pretium, id porta felis dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris pharetra metus convallis, condimentum odio a, eleifend arcu. Vivamus sed iaculis massa. In hac habitasse platea dictumst. Nullam sollicitudin odio non hendrerit tempus. In pulvinar molestie libero in sagittis. Donec at nunc vitae urna commodo tempor in nec dui.
</p>
<button>Read More...</button>
</div>
</div>
</div>
<div>
<div>
<video controls>
<source src="video/movie.mp4" type="video/mp4">
</video>
<div>
<h3>List Element Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare nulla non quam pretium, id porta felis dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris pharetra metus convallis, condimentum odio a, eleifend arcu. Vivamus sed iaculis massa. In hac habitasse platea dictumst. Nullam sollicitudin odio non hendrerit tempus. In pulvinar molestie libero in sagittis. Donec at nunc vitae urna commodo tempor in nec dui.
</p>
<button>Read More...</button>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- /MAIN SECTION -->
<!-- FOOTER -->
<footer>
<div>
<p>Copyright © Exemple.com 2017</p>
</div>
</footer>
<!-- /FOOTER -->
</body>
</html>Код CSS:
/* GENERAL STYLES */
body {
font-family: Arial, San-Serif;
font-size: 100%;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style-type: none;
}
.container {
margin: 0 auto;
width: 960px;
}
/* HEADER */
.header {
padding: 50px 0;
background-color: yellowgreen;
}
.header h1,
.header h2 {
color: greenyellow;
text-align: center;
}
/* NAVIGATION */
.page-navigation {
background-color: #222;
border-color: #101010;
min-height: 64px;
}
.page-navigation li {
float: left;
width: 100px
}
.page-navigation a {
display: block;
color: #9d9d9d;
line-height: 4em;
font-weight: bold;
text-align: center;
}
.page-navigation li a:hover {
color: yellowgreen;
background-color: black;
}