10 mar 2022

#shorts - wykrycie za pomocą css czy ekran ma funkcje dotykowe czy nie

Dość często potrzebujemy aby style były widoczne lub inaczej się zachowaywały/wyglądały gdy użytkownik używa strony na desktopie a inaczej na urządzeniu mobilnym "dotykowym" bez urządzenia sterującego np. myszy.

Do detekcji typu urządzenia możemy użyć "media queries".

Najpierw przyglądnijmy się @media (hover: hover)
W poniższym przykładzie jedynie urządzenia które mają możliwość najechania kursorem na element zmienią jego background. Oczywiście ten przykład jest mało życiowy, ale wyobraź sobie że możemy ukryć/pokazać element w zależności od urządzenia i nie potrzebujemy do tego js.

<a href="#">Link który powinien być podświetlić</a>
@media (hover: hover) {
  a:hover {
    background: red;
  }
}
27 kw. 2016

Przykład dodania obsługi hover do wierszy tabeli

jQuery(document).ready(function () {
  jQuery('.zasoby tr.zasoby_row').hover(
    function () {
      jQuery(this).css({ 'background-color': "#f8f8f8" });
    }, function () {
      jQuery(this).css({ 'background': 'transparent' });
    }
  );
});