Ручка наведения на сенсорных устройствах - PullRequest
Новая
       42

Ручка наведения на сенсорных устройствах

0 голосов
/ 24 июня 2019

У меня есть эффект наведения на моем сайте, который вращает окно и отображает контент. Но на сенсорных устройствах, где невозможно зависание, я бы хотел заменить наведение касанием.

Таким образом, на сенсорном устройстве при первом нажатии будет применен эффект наведения, а при втором нажатии будет активирована ссылка.

Я уже пытался добиться этого с помощью только CSS (@media (hover: none) and (pointer: coarse)), но без удачи.

Я также пытался обработать событие touchstart в jquery, но безуспешно, так как я начинающий с javascript.

Это мой HTML: 

<div class="item photo">
    <div class="content">
        <div class="flip-box taphover">
            <a href="%PERMALINK%" class="permalink">
                <div class="flip-box-inner">
                    <div class="flip-box-front">
                        %POST_THUMBNAIL|400x400%
                    </div>
                    <div class="flip-box-back">
                        <h2>%TITLE%<br>
                            <span>%ACF|podnadpis-1%<br>
                            <span>%ACF|datum_zahajeni% - 
                            %ACF|datum_ukonceni%</span></span>
                        </h2> 
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

Это мой CSS: 

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;

}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}



/* Style the front side (fallback if image is missing) */
.flip-box-front {
  position: relative;
  backface-visibility: hidden;
}

.flip-box-back {
      position: absolute;
      top: 0; left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  background-color: #fff;
}

Может ли кто-нибудь дать несколько советов, как добиться ожидаемого поведения, изменяя мой код?

...