appear footer when in hover

Question

appear footer when in hover

Navigation

#1 by (5 votes)

1

What I want to do is show the footer when the mouse is on top, I did the following but it does not work.

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>

html css

asked by hubman 10.01.2017 в 15:58

source

1 answer

ProgressBar does not activate Winform Difference between $ ("# item") and $ ("# item") [0] Jquery

score 5 · Accepted Answer

It is because you have removed .test from the flow of the document by display: none and therefore you will not be able to activate events in it. To which you must give display:none is to the child ( 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>

Another interesting point is that you do not need to use keyframes to animate the opacity, you can only use transition :

transition: opacity 2s ease;