Репликация в jquery для мобильных устройств: наведение класса с помощью touchstart в другом div - PullRequest
Новая
       39

Репликация в jquery для мобильных устройств: наведение класса с помощью touchstart в другом div

0 голосов
/ 30 октября 2018

У меня есть этот код, который отлично работает с рабочего стола, поместив указатель мыши в класс show и показывает панель div: hover. Я хотел бы повторить это в jquery для мобильных устройств, используя touchstart в классе show, чтобы он выглядел bar: hover. и мне бы хотелось, чтобы через 1,5 секунды div bar: hover исчезал автоматически и оставался классом бара до следующего сенсорного запуска в классе шоу. помогите мне большое спасибо 

.bar {
  position: absolute;
  top: 0;
  background-color: transparent;
  height: 3px;
  z-index: 99;
  width: 0;
}

.show:hover .bar {
  background: #009bfc;
  width: 100%;
  left: 0;
  height: 3px;
  -webkit-animation: dude .75s 1 forwards;
  -moz-animation: dude .75s 1 forwards;
  -o-animation: dude .75s 1 forwards;
  animation: dude .75s 1 forwards;
}

@-webkit-keyframes dude {
  0% {
    width: 0;
    overflow: hidden;
  }
  100% {
    width: 100%;
    visibility: hidden;
  }
}

@-moz-keyframes dude {
  0% {
    width: 0;
    overflow: hidden;
  }
  100% {
    width: 100%;
    visibility: hidden;
  }
}

@-o-keyframes dude {
  0% {
    width: 0;
    overflow: hidden;
  }
  100% {
    width: 100%;
    visibility: hidden;
  }
}

@keyframes dude {
  0% {
    width: 0;
    overflow: hidden;
  }
  100% {
    width: 100%;
    visibility: hidden;
  }
}
<div class="show"><img class="mini_post_vid_thumb" style="" src="https://unsplash.it/400/200">
  <div class="bar" style="animation-duration: 1.5s;"></div>
</div>
...