1
I have a problem with my menu which consists of links with images that are replaced by others when on mouseover.
I did a snippet so you can see the problem. If you notice, I took the text-indent the last two links of the menu and so already work although it is without the effect rollover and in the first three links rollovers work, but links do not.
.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
left: 0;
top: 0;
z-index: -1;
}
@media screen and (max-width: 1024px) {
img.bg {
left: 50%;
margin-left: -512px;
}
}
#video-wrapper1 {
position: absolute;
left: 700px;
top: 100px;
display: block;
width: 15px;
height: 15px;
z-index: 99999;
background: #0073ff;
border-radius: 50%;
transition-property: width, height;
transition-duration: .2s;
transition-timing-function: linear;
}
#video-wrapper1:hover {
width: 20px;
height: 20px;
}
nav li {
list-style-type: none;
float: left;
display: block;
margin-right: 14px;
margin-bottom: 0;
}
nav a#pull {
display: none;
}
nav {
height: 40px;
width: 50px;
position: relative;
}
nav ul {
width: 260px;
height: 40px;
height: 100px;
padding: 0;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
@media only screen and (max-width: 800px) {
nav ul {
display: none;
}
nav a#pull {
display: block;
position: relative;
}
nav a#pull:after {
content: "";
background: url('../imagens/icon_nav.png') no-repeat;
display: inline-block;
position: relative;
width: 50px;
height: 50px;
}
}
nav ul li:hover:nth-child(1) {
background: url('http://s33.postimg.org/sokmmh4lr/Logo_hover.png') no-repeat;
text-indent: 99999px;
margin-right: 14px;
display: block;
width: 50px;
height: 46px;
}
nav ul li:hover:nth-child(2) {
background: url('http://s33.postimg.org/f74u19jtb/fb_logo2.png') no-repeat;
display: block;
width: 35px;
height: 35px;
position: relative;
margin-right: 14px;
text-indent: 99999px;
}
nav ul li:hover:nth-child(3) {
background: url('http://s33.postimg.org/hrhgs7m33/twitter.png') no-repeat;
display: block;
width: 35px;
height: 35px;
position: relative;
margin-right: 14px;
text-indent: -99999px;
}
nav ul li:hover:nth-child(4) {
background: url('http://s33.postimg.org/eehydlqbz/youtube_logo.jpg') no-repeat;
display: block;
width: 35px;
height: 35px;
position: relative;
margin-right: 14px;
}
nav ul li:hover:nth-child(5) {
background: url('http://s33.postimg.org/foxos8wpb/logo_ulht.gif') no-repeat;
display: block;
width: 35px;
height: 35px;
position: relative;
margin-right: 14px;
}<!DOCTYPE html>
<title>Projecto Aurora</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="jquery/jquery-2.2.3.min.js" type="text/javascript"></script>
<script src="js/video.js" type="text/javascript"></script>
<body>
<img src="http://s33.postimg.org/3ueeqpuhb/Fundo.png" class="bg" alt="Lisboa" >
<nav class="clearfix">
<ul class="clearfix">
<li><a href="index.html"><img src="http://s33.postimg.org/697nx9pjj/Logo.png" alt=""/></a></li>
<li><a href="#"><img src="http://s33.postimg.org/cgsp8agzz/fb_logo_BK.png" alt=""/></a></li>
<li><a href="#"><img src="http://s33.postimg.org/5owb5kntb/twitter_BK.png" alt=""/></a></li>
<li><a href="#"><img src="http://s33.postimg.org/ewtlje173/youtube_logo_BK.png" alt=""/></a></li>
<li><a href="#"><img src="http://s33.postimg.org/jlndjsuj3/logo_ulht_BK.png" alt=""/></a></li>
</ul>
<a href="#" id="pull"></a>
</nav>
<div id="video-wrapper1">
<iframe id="video1" width="200" height="169" src="https://www.youtube.com/embed/Inufy4FdnRk"
frameborder="0" style="display:none" allowfullscreen>
</iframe>
</div>
</body>
</html>I appreciate the help