нижний колонтитул aparecer cuando este en hover

lo que quiero hacer es que aparesca el footer cuando el mouse este encima, hice lo siguiente pero никакой 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>
1
задан 10.01.2017, 16:58
0 ответов

Он, потому что ты достал в .test разгрузки документа посредством display: none и следовательно ты не сможешь включать события в нем. В того, которого ты должен давать ему display:none он в сына (p).

body {
    margin: 0;
}
.block {
    height: 2000px;
}
.header img {
    width: 100%;
}
.test {
    position: fixed;
    z-index: 99999;
    bottom: 0;
    height: 100px;
    width: 100%;
    cursor: pointer;
}
.test > p {
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  font-size: 12px;
  font-family: Arial, sans-serif;
  font-weight: normal;
  color: #fff;
  height: 100%;
  line-height: 100px;
  margin: 0;
  text-align: center;
}
.test:hover {
    /*color:#000;*/
    margin-top: 25px;
}
.test:hover > p {
  display: block;
  font-size: 21px;
  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>

Другая интересная точка состоит в том, что ты не нуждаешься в том, чтобы использовать keyframes, чтобы оживлять матовость, только ты можешь использовать transition:

transition: opacity 2s ease;
5
ответ дан 03.12.2019, 17:46