Удалить событие: hover на мобильных устройствах

У меня есть событие :hover, работающее на веб-сайте, но у меня возникла проблема при использовании системы на мобильных устройствах.Удалить событие: hover на мобильных устройствах

Есть ли способ удалить его в css или js? Я пробовал так много всего, но мне не повезло.

Я попробовал modernizr.com и медиа-запросы без успеха.

мой дерзость код:

ul { 
    li { 
     padding: 20px; 
     &:hover { 
     background-color: $red; 
     color: $black; 
     } 
    } 
    }

СМИ запрос:

@media (max-width: $screen-sm-min) { 
    ul { 
    li { 
     &:hover { 
     color: inherit; 
     cursor: pointer; 
     } 
    } 
    } 
}

дерзость кв.м. переменная:

$screen-sm-min: 768px;

источник

2016-06-01 Raduken

Хотя вы уже пробовали медиазапросы, все-таки я дам вам знаю, что это возможно с этим. Пожалуйста, поделитесь своим кодом – brk

Я редактирую свой вопрос с кодом. – Raduken

Почему вы не применяете стили наведения только по ширине, а не применяете их для всех ширины, а затем пытаетесь их отменить? –

Вы можете использовать CSS медиа-запросов для взаимодействия особенности, но они являются относительно новыми, iOS9 + и Android 5+: http://caniuse.com/css-media-interaction

Вы можете использовать только применить :hover стили, где эта функция доступна

/* :hover will only work in Edge, Chrome, Safari 9+ for now */ 
@media (hover: hover) { 
    .your-selector:hover { 
     color: red; 
    } 
}

Или , если вы хотите получить более широкую поддержку прямо сейчас, удалите только :hover:

/* :hover will be removed in iOS 9+ and Android 5+ */ 
.your-selector:hover { 
    color: red; 
} 
@media (hover: none) { 
    .your-selector:hover { 
     color: oldcolor; 
    } 
}

Если вы хотите получить более широкую поддержку, вам необходимо определить сенсорные возможности с помощью javascript. Довольно стандартный способ сделать это заключается в следующем:

/* add a class to <html> */ 
var isTouch = 'ontouchstart' in window; 
document.documentElement.className += isTouch?' touch ':' no-touch ';

/* only use hover when the no-touch class is present */ 
.no-touch { 
    .your-selector:hover { 
     color: red; 
    } 
}

Используя это последнее решение с вашим кодом:

ul { 
    li { 
    padding: 20px; 
    .no-touch &:hover { 
     background-color: $red; 
     color: $black; 
    } 
    } 
}

источник

2016-06-01 08:44:41

Я узнал что-то новое - спасибо. Никогда не использовались медиа-запросы для функций взаимодействия - я буду с этого момента! –

Удалить событие: hover на мобильных устройствах

ответ

Смежные вопросы