lo que quiero hacer es que aparesca el footer cuando el mouse este encima, hice lo siguiente pero no funciona.
body {
margin: 0;
}
.block {
height: 2000px;
}
.header img {
width: 100%;
}
.test {
position: fixed;
z-index: 99999;
bottom: 0;
display: none;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
font-size: 12px;
font-family: Arial, sans-serif;
font-weight: normal;
color: #fff;
text-align: center;
cursor: pointer;
}
.test:hover {
color:#000;
margin-top: 25px;
font-size: 21px;
text-align: center;
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
<div class="header">
<img src="http://lorempixel.com/920/300/" alt="">
</div>
<div class="block"></div>
<div class="test">
<p>This is my footer</p>
</div>
display: none
en tu clase, no podrás ejecutar ningún evento, ya que el navegador no lo renderizará y es como si no estuviera