Zmiana: najedź, aby dotknąć / kliknąć w przypadku urządzeń mobilnych

Rozejrzałem się, ale nie mogę znaleźć tego, czego szukam.

Obecnie mam na swojej stronie animację css, która jest wywoływana przez: hover. Chciałbym, aby to zmieniło się na „kliknięcie” lub „dotknięcie”, gdy rozmiar strony przekroczy 700 pikseli przy użyciu zapytań o media.

Oto, co mam w tej chwili: http://jsfiddle.net/danieljoseph/3p6Kz/

Jak widać,: hover nie będzie działał na urządzeniach mobilnych, ale nadal chcę mieć pewność, że działa tak samo po prostu przez kliknięcie, a nie najechanie kursorem.

Wolałbym raczej używać css, jeśli to możliwe, ale również jestem zadowolony z JQuery.

Mam wrażenie, że jest to bardzo łatwe, ale brakuje mi czegoś bardzo oczywistego! Każda pomoc będzie mile widziana.

Oto animacja CSS:

.info-slide {
  position:absolute;
  bottom:0;
  float:left;
  width:100%;
  background:url(../images/blue-back.png);
  height:60px;
  cursor:pointer;
  overflow:hidden;
  text-align:center;
  transition: height .4s ease-in-out;
  -webkit-transition: height .4s ease-in-out;
  -moz-transition: height .4s ease-in-out;
}

.info-slide:hover {
  height:300px;
}

Jeśli używasz: active selector w połączeniu z: hover, możesz to osiągnąć zgodnie z w3schools, o ile selektor: active jest wywoływany po selektorze: hover.

 .info-slide:hover, .info-slide:active{
   height:300px;
 }

Musiałbyś przetestować FIDDLE w środowisku mobilnym. W tej chwili nie mogę.
korekta - właśnie przetestowałem na telefonie komórkowym, działa dobrze

Możesz dodać onclick=""kursor do elementu. Po tym Hover zadziała.

Edycja: Ale naprawdę nie powinieneś dodawać niczego związanego ze znacznikami, po prostu opublikuj to jako alternatywę.

document.addEventListener("touchstart", function() {}, true);

Ten fragment kodu włączy efekty najeżdżania na ekrany dotykowe

Mam ten sam problem na urządzeniu mobilnym z przeglądarką Microsoft Edge. Mogę rozwiązać problem z: aria-haspopup="true". To trzeba dodać do div, a :hover, :active, :focusdla innych przeglądarek mobilnych.

Przykład html:

<div class="left_bar" aria-haspopup="true">

CSS:

.left_bar:hover, .left_bar:focus, .left_bar:active{
    left: 0%;
    }

Jestem noobem CSS, ale zauważyłem, że hover będzie działał na ekranach dotykowych, o ile jest to element „hoverable”: obraz, link, przycisk. Możesz to wszystko zrobić za pomocą CSS, używając następującej sztuczki.

Zmień tło div na rzeczywisty tag obrazu w elemencie div lub utwórz fałszywe łącze wokół całego elementu div, a następnie zarejestruje się jako najechanie po dotknięciu obrazu.

Będzie to oznaczać, że reszta strony również powinna być „aktywowana”, więc kiedy dotkniesz poza obrazem, program rozpozna, że ​​zakończył się napis info-slide: hover. Moja sztuczka polega na tym, aby wszystkie inne linki do moich treści były fałszywe.

Nie jest zbyt elegancki, ale działa.

Na większości urządzeń inne odpowiedzi działają. Dla mnie, aby upewnić się, że pracował na każdym urządzeniu (w reakcji) musiałem owinąć go w tagu kotwicy <a>i dodaj następujący: :hover, :focus, :active(w tej kolejności), jak role="button"i tabIndex="0".

Myślę, że ta prosta metoda może osiągnąć ten cel. Dzięki CSS możesz wyłączyć zdarzenie wskaźnika na „none”, a następnie użyć jQuery do przełączania klas.

.item{
   pointer-events:none;
 }

.item.clicked{
   pointer-events:inherit;
 }
 
.item:hover,.item:active{
  /* Your Style On Hover Converted to Tap*/
  background:#000;
}

Użyj jQuery, aby zmienić klasyfikację:

jQuery('.item').click(function(e){
  e.preventDefault();
  $(this).addClass('clicked')l
});

Jedyne rozwiązanie CSS dla tych, którzy mają problemy ze stylizacją przycisków na ekranie dotykowym na urządzeniach mobilnych.

To rozwiąże problemy z najechaniem drążkiem / aktywnym przyciskiem.

body, html {
  width: 600px;
}
p {
  font-size: 20px;
}

button {
  border: none;
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background: #00aeff;
  font-size: 20px;
}

button:active {
  background: black;
  color: white;
}

.delayed {
  transition: all 0.2s;
  transition-delay: 300ms;
}

.delayed:active {
  transition: none;
}

<h1>Sticky styles for better touch screen buttons!</h1>

<button>Normal button</button>

<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>

<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures.   With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely.  This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>

<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>

Cóż, zgadzam się z powyższymi odpowiedziami, ale nadal można to zrobić w inny sposób i jest to za pomocą mediazapytań.

Załóżmy, że chcesz to zrobić:

body.nontouch nav a:hover {
    background: yellow;
}

możesz to zrobić za pomocą zapytania o media jako:

@media(hover: hover) and (pointer: fine) {
    nav a:hover {
        background: yellow;
    }
}

Aby uzyskać więcej informacji, odwiedź tę stronę.