Псевдокласс :hover не работает на IOS

@maks_7 · Регистрация: 14.10.2014

Студворк — интернет-сервис помощи студентам

Смысл в том, что при наведении курсора на кнопку меню, оно(меню) должно раскрываться. В IOS этого не происходит, а именно в браузере Сафари. Поставил cursor:pointer, но все равно не работает. Что Вы подскажите сделать, чтоб меню при наведении раскрывалось?

@k-x · 26.08.2015, 11:49

pointer никак не влияет на открытие/закрытие чего либо. Это всего лишь стиль курсора

Но раз кода мы не наблюдаем, то предположу, что полезно будет такое чтиво: http://habrahabr.ru/post/212959/

@juleczka · 26.08.2015, 12:09

Совсем недавно помог
:focus
к тому же элементу и с теми же стилевыми свойствами, что и :hover
Примерно так:

CSS
1
2
.modal .modal-container:hover ul li {display: block; margin: 0 0 5px;}
.modal .modal-container:focus ul li {display: block; margin: 0 0 5px;}

@maks_7 · 26.08.2015, 14:54 **[ТС]**

pointer никак не влияет на открытие/закрытие чего либо. Это всего лишь стиль курсора Но раз кода мы не наблюдаем, то предположу, что полезно будет такое чтиво: http://habrahabr.ru/post/212959/

Вы не подскажите, я в яваскриптах не очень, там в конце статьи есть скрипт, я так понял он решает все проблемы.
А стили с hover оставлять, у меня они в отдельном файле? Просто вставить скрипт в документ и все?

@k-x · 26.08.2015, 15:27

maks_7, сложно сказать не имея перед глазами сути проблемы. Можно попробовать вот таким скриптом: (предварительно подставив Ваши селекторы)

JavaScript
1
2
3
4
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$(".menu li a").click(function(){
});
}

в данном случаи применяется ко всем ссылкам, которые находятся в блоке .menu

Добавлено через 16 минут

если имеется jquery конечно.

JavaScript
1
$(document).ready(function() {  /* тут то что выше */ });

и поместите на страницу.

@maks_7 · 26.08.2015, 15:37 **[ТС]**

Вот html файл, в голове документа стили. Суть в том, что при наведении на черную полосу открывается меню, а в открывшемся меню, при наведении на подпункт "услуги" -открывается еще одно меню. Помогите пожалуйста.

@k-x · 26.08.2015, 16:00

maks_7, сразу после <head> вставьте такое:

HTML5
1
2
3
4
5
6
7
8
9
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {  
        if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
            $(".first_level li a").click(function(){
            });
        }
     });
    </script>

Попробуйте. Может поможет такой вариант.

@maks_7 · 26.08.2015, 16:15 **[ТС]**

Это, как я понимаю, для пунктов меню, а для кнопки самого меню? т.е. само меню свернуто в кнопку, нужно чтобы оно раскрывалось при наведении?

@k-x · 26.08.2015, 16:31

Блин, плохо нет устройства под рукой ios'овского.

такой вариант:
тамже, после head (вместо всего того, что выше)

JavaScript
1
2
3
<script>
document.addEventListener("touchstart", function(){}, true);
</script>

и сверху, там где стили css:

CSS
1
2
3
4
5
6
7
8
9
10
   div.button:hover, div.button:active {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
    -webkit-touch-callout: none
    }
     div.usl:hover, div.usl:active {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
    -webkit-touch-callout: none
    }

Добавлено через 9 минут
проверил только что таки на ipad. Всё работает

@maks_7 · 26.08.2015, 21:07 **[ТС]**

k-x, спасибо Вам огромное, действительно заработало!!! Вы мне очень помогли!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .

Псевдокласс :hover не работает на IOS

Решение

Решение

@maks_7 4 / 4 / 3 Регистрация: 14.10.2014 Сообщений: 323

	Псевдокласс :hover не работает на IOS 26.08.2015, 11:35. Показов 10530. Ответов 9 Метки нет (Все метки) Смысл в том, что при наведении курсора на кнопку меню, оно(меню) должно раскрываться. В IOS этого не происходит, а именно в браузере Сафари. Поставил `cursor:pointer`, но все равно не работает. Что Вы подскажите сделать, чтоб меню при наведении раскрывалось? 0

@k-x 46 / 46 / 27 Регистрация: 19.05.2014 Сообщений: 117
	26.08.2015, 11:49
	Сообщение было отмечено maks_7 как решение Решение pointer никак не влияет на открытие/закрытие чего либо. Это всего лишь стиль курсора Но раз кода мы не наблюдаем, то предположу, что полезно будет такое чтиво: http://habrahabr.ru/post/212959/ 1

@maks_7 4 / 4 / 3 Регистрация: 14.10.2014 Сообщений: 323
	26.08.2015, 16:15 [ТС]
	Это, как я понимаю, для пунктов меню, а для кнопки самого меню? т.е. само меню свернуто в кнопку, нужно чтобы оно раскрывалось при наведении? 0

@maks_7 4 / 4 / 3 Регистрация: 14.10.2014 Сообщений: 323
	26.08.2015, 21:07 [ТС]
	k-x, спасибо Вам огромное, действительно заработало!!! Вы мне очень помогли! 0