Появление footer, когда он будет на изображении (стреле)

Я попробовал способствовать тому, чтобы появился footer, когда click будет на стреле, но происходит мигание и не функционирует: Возможно делать только с css или он будет необходим js?

body {
    margin: 0;
}
.block {
    height: 2000px;
}
.header img {
    width: 100%;
}
.test {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    z-index: 99999;
    bottom: 0;
    height: 10px;
    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;

  height: 100%;
  line-height: 100px;
  margin: 0;
  text-align: center;
}
.test:hover{
  background-color: rgba(0, 0, 0, 0.6);
  height: 100px;
    /*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">
<img src="http://iconos.gratis.es/iconos/finanzas/euro-bolsa-dolar-graficas/flechas.png" alt="footer" height="10" width="10">
    <p>This is my footer
     

   </p>
</div>
0
задан 10.01.2017, 18:18
0 ответов

Если, если могут, добавляя немного CSS3 без необходимости JavaScript было бы возможно создавать сходный эффект, было бы возможно делать двух форм, одна с hover та, которую ты пробуешь использовать и хороший пример, который они принесли тебе, и другая более передовая серьезная форма используя один input checked, что был бы посредством кнопки.

Заметь: кроме того было бы возможно осуществлять псевдо-элементы :before и(или) :after и вводить значки шрифтов или текста и создавать другой эффект в нашу кнопку легкого способа.

Пример осуществляя кнопку кликом:

body {
    height:100%; width:100%;
    margin: 0;
    overflow-x:hidden;
}

.header img {
    width: 100%;
}

/*Invisible checkbox*/
input[type=checkbox] { 
   clip: rect(0, 0, 0, 0);  
   position: absolute; 
}   
/*Posicion flecha*/
label[for=btn-footer] {
    background-color: rgba(0, 0, 0, 0.6);
    position:fixed; 
    bottom:20px; 
    left:20px;
    padding: .3rem;
    z-index:101;
}
/* Mostramos pie de pagina */
#btn-footer:checked ~ .test {
   display:block;
   bottom:0;
   transition: bottom 1s linear;

}
/* Cambiamos estilos para flecha */
#btn-footer:checked + label {
   bottom:60px;
   transform:rotate(-180deg);
    
 }
/* Estilos pie de pagina */
.test {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    bottom: -100px;/* Invisible */
    height: 100px;
    width: 100%;
    z-index:100;
    overflow:hidden;
    cursor: pointer;
    transition: bottom 1s linear;
}
.test p {      
  font-size: 20px;
  font-family: Arial, sans-serif;
  font-weight: normal;
  color:white;

  height: 100%;
  line-height: 100px;
  margin: 0;
  text-align: center;
}
/* Transiciones, para efectos a nuestra caja y boton */
.test,label[for=btn-footer],#btn-footer:checked + label[for=btn-footer] {
    transition: bottom 1s linear;
}

   
<div class="header">
    <img src="http://lorempixel.com/920/300/" alt="">
</div>
    


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non eleifend sem. Fusce tristique, lacus eget ultricies sollicitudin, urna justo venenatis neque, in scelerisque turpis ante quis nibh. Nunc pellentesque luctus suscipit. Vivamus eu ex bibendum, malesuada lorem id, rutrum diam. Pellentesque blandit magna tellus, cursus auctor elit pulvinar tristique. Aliquam vulputate vitae risus vitae pulvinar. Curabitur vitae posuere magna. Sed vitae maximus sem, eu fringilla diam.<br />
<br />
Integer volutpat auctor orci, vel faucibus felis ultricies sit amet. Donec eget elit at sem commodo mattis feugiat quis nibh. Aliquam quis turpis nec libero hendrerit molestie. Suspendisse et mauris blandit, posuere ligula vel, aliquam ex. Nam ut blandit mi, eget imperdiet ipsum. Aliquam tincidunt mauris consectetur orci elementum, eu dignissim metus pharetra. Sed a elit viverra, dictum justo ut, rhoncus tellus. Aliquam erat volutpat. Vivamus suscipit volutpat orci id fermentum. Proin vel euismod est, sit amet bibendum magna. Nunc tincidunt tristique magna, eget mattis ante pharetra in.<br />
<br />
Nullam lacinia arcu rutrum congue accumsan. In malesuada accumsan metus in bibendum. Cras auctor nulla metus, non aliquet neque ullamcorper eget. Curabitur sollicitudin sit amet lorem et convallis. Ut nec pharetra sapien. Nulla tristique vulputate magna elementum tristique. Vivamus ut quam ex. Pellentesque id tincidunt turpis. Pellentesque suscipit at ligula ut consequat. Vestibulum eu consectetur est. Proin porta rhoncus elit sed dictum. Cras auctor nisl leo, at egestas lectus auctor vel. Proin faucibus enim sapien. Etiam risus neque, viverra ac vulputate sed, dapibus at orci. Nulla faucibus turpis ac neque elementum cursus. Aliquam in est nisi.<br />
<br />
<!-- boton pie pagina -->
<input type="checkbox" id="btn-footer" />

<label for="btn-footer">
   <img src="http://iconos.gratis.es/iconos/finanzas/euro-bolsa-dolar-graficas/flechas.png" alt="footer" height="10" width="10">
</label>

<!-- Contenido pie pagina -->        
<div class="test">    
   <p>This is my footer</p>
</div>
1
ответ дан 03.12.2019, 17:46
  • 1
    ты можешь проверять мой ответ porfavor –  11.01.2017, 00:33
  • 2
    очень хороший твой ответ +1, но мой ответ я хочу заставить это функционировать и он не дает в помещении –  11.01.2017, 00:38
  • 3
    я не сделал доказательство, только этот пример я сделал доказательство локального способа и оно не функционирует, выходит ошибка –  11.01.2017, 00:45
  • 4
    ¿ какая ошибка выходит у тебя в частности, aver, если я могу помогать тебе? @acR –  11.01.2017, 00:46
  • 5
    эта ошибка в линии 9, который этот " var в = el.clientHeight; " –  11.01.2017, 00:47

Твой пример функционирует, мигание, - потому что, когда ты помещаешь курсор на изображении, становится видимым элемент p и этот "покрывает" изображение теряя так hover. Ésto ты можешь решать это добавляя один z-index превышающий изображение.

Свойство z-index устанавливает порядок видимости в батарейке элементов. По умолчанию, отец всегда будет под батарейкой, в то время как последний сын будет в верхе.

Я оставляю тебе пример ésto и делая абсолютное изображение.

body {
    margin: 0;
}
.block {
    height: 2000px;
}
.header img {
    width: 100%;
}
.test {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    z-index: 99999;
    bottom: 0;
    height: auto;
    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;
  line-height: 100px;
  margin: 0;
  text-align: center;
}
.test img {
  background-color: rgba(0, 0, 0, 0.6);
  left: 2px;
  position: absolute;
  bottom: 2px;
  height: 20px;
  width: 20px;
  z-index: 10;
}
.test > img:hover + p {
  display: block;
  height: 100px;
  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">
<img src="http://iconos.gratis.es/iconos/finanzas/euro-bolsa-dolar-graficas/flechas.png" alt="footer" height="10" width="10">
    <p>This is my footer
     

   </p>
</div>
2
ответ дан 03.12.2019, 17:46