Не работает hover в sublime text
Пытаюсь раскрутить изображение с css, но по какой-то причине hover работает только для firefox. Изображение вращается во всех браузерах, но hover spin не работает в IE и chrome .button img < position:absolute; left:500px; top:300px; width:70px; height:70px; -webkit-animation: rotation 4s infinite.
Добавьте <!DOCTYPE html> в качестве первой строки вашего HTML.
Удалить <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://">
Проблема, скорее всего, будет с вашим doctype, но здесь есть две отдельные проблемы, и одна из них-довольно тонкая ошибка.
Давайте сначала разберемся с самым простым:
doctype, который вы сейчас используете, - это ужасный выбор doctype:
Это HTML4.01 Переходный doctype. Она очень, очень старая. Он восходит к тем дням, когда запускался IE6, и большинство людей были на IE5. Это один из немногих типов документов, который заставляет браузер переходить в "almost standards mode". Это режим на полпути между старым режимом сломанных причуд и режимом современных стандартов. Это действительно плохая идея-использовать этот режим, потому что он плохо документирован и нестандартен. Вы получите проблемы с кросс-браузером, используя этот doctype.
Поэтому я настоятельно рекомендую перейти на более современный HTML5 doctype:
Это самый простой вариант, и он решит некоторые из ваших кроссбраузерных ошибок. Однако это не решит конкретную проблему в вашем вопросе. Итак, теперь о более тонкой ошибке, которая на самом деле вызывает у вас проблемы:
IE (и другие браузеры) переведут страницу в режим причуд, если на странице нет действительного doctype. Вы, вероятно, уже знаете это.
Однако вы, вероятно, не знаете, что в некоторых версиях IE есть ошибка, из-за которой, если есть что-то перед doctype-даже просто пустая строка-это приведет к тому, что браузер увидит doctype как недействительный.
Я вижу, что ваш код начинается так:
Обратите внимание на пустую строку перед doctype. Это, скорее всего, приведет к тому, что ваша страница перейдет в режим причуд.
Решение состоит в том, чтобы удалить эту пустую строку. Это должно вывести браузер из режима причуд и решить проблемы с наведением курсора.
Таким образом, объединив эти две точки вместе, ваш код теперь должен выглядеть следующим образом:
Надеюсь, это поможет.
Похожие вопросы:
У меня есть код HTML: <span style=padding-right:100px; <p>Hover Here</p> <span <a.
Пытаюсь раскрутить изображение с css, но по какой-то причине hover работает только для firefox. Изображение вращается во всех браузерах, но hover spin не работает в IE и chrome .button img
Я обнаружил некоторое странное поведение в Internet Explorer (IE10, а также при эмуляции всех версий, поддерживающих ::after )., при применении псевдоэлемента к состоянию наведения элемента (.
CSS hover image не работает на Firefox, но работает на Chrome Это мои коды. .col-md-2 .angelhack < height: 65px; width: 188px; content: url(../img2/logo_angelhack.jpg); >.col-md-2 .angelhack:hover.
Я хочу получить элемент под курсором. Когда я использую document.querySelectorAll(:hover); , он хорошо работает в Chrome, но не работает в Firefox или IE. Это может быть потому, что я использую его.
:hover — псевдокласс, определяющий стиль элемента при наведении на него указателя.
Проблемы с псевдоклассом :hover начались еще с тех пор, как на сенсорных устройствах был установлен первый браузер. Конечно, проблемы пытались решить и решали, но полноценным решением это вряд ли можно было назвать. Однако с новыми медиазапросами (Media Queries) 4 уровня проблема, кажется, решена окончательно.
“Хм … а в чем, собственно говоря, заключается проблема?”
Допустим, вы просто добавили псевдокласс :hover к элементу вашей веб-страницы. Следовательно, когда пользователь наводит курсор мыши на этот элемент, то он активирует некоторые правила CSS и меняет свой внешний вид. Легче легкого!
Однако на сенсорном экра н е с псевдоклассом :hover возникают проблемы: после того, как нажатие выполнено, эффект наведения закрепляется на элементе. Более того, это происходит, даже тогда, когда элемента не касались напрямую. Например, когда пользователь в процессе прокрутки страницы задевает элемент и его отображение меняется, согласно CSS правилам :hover.
Такая же проблема возникает при перетаскивании пользователем элементов с :hover по веб-странице. Это происходит, потому что технически — ваш палец (или стилус) и есть указатель, который и активирует :hover. Но проблема состоит в том, что даже после прекращения перетаскивания элемента — эффекты, активированные :hover, остаются.
Подобное поведение элементов может запутать пользователя и подобная практика будет отрицательно сказываться на вашем продукте. Эту проблему необходимо как-то решить.
“Не может же быть, чтобы эту проблему не пытались как-то решить…”
Да, определенные решения выдвигались. Лучшим из них было использование JavaScript для определения наличия сенсорного экрана и последующее применение класса к body . После чего, добавляя к какому-либо элементу псевдокласс :hover, будет происходить явное обращение к этому классу.
Однако подобное решение имеет несколько недостатков:
- Разработчик может создать JS-сценарий обнаружения, который работает сегодня, но что с ним будет через пару месяцев, когда появится какая-то новая технология? Ноутбуки с сенсорными экранами? Съемные сенсорные экраны? Apple Pencil? Никто не хотел бы беспокоиться об этом во время разработки.
- Использование основанного на компонентах JS-фреймворка с инкапсулированными стилями неудобно. Так как каждый раз, когда активируется :hover, стили этого элемента должны ссылаться на этот глобальный класс.
- Это решение может работать по-разному на разных устройствах. Возможно, что для специальных устройств придется придумывать специальное решение. Однако должен быть стандартизированный способ, работающий на всех устройствах.
Media Queries Level 4
Медиазапросы великолепны. Они в одиночку внедрили адаптивный веб-дизайн и их по праву считают краеугольным камнем современной мобильной веб-разработки. Организация W3C добавила функции взаимодействия с мультимедиа в качестве рекомендации для L4 Media Queries, которые мы можем использовать для распознавания устройств с сенсорным экраном.
Четвертый уровень медиазапросов включает в себя: hover , any-hover , pointer , any-pointer . Они предоставляют информацию о возможности применения hover и типе пользовательского ввода. Например, @media (hover: hover) будет true, если hover элемента активируется курсором мыши. А @media (any-pointer: coarse) будет true, если какой-либо ввод имеет ограниченную точность (например, касание по сенсору). Эти мультимедийные функции предоставляют достаточно информации для правильного взаимодействия с hover .
Одна из проблем заключается в том, что медиазапросы на данный момент являются рекомендательными. Это означает, что они могут измениться или даже быть удалены в любое время. Помните об этом при работе с ними. На данный момент это определенно работает, и мы возлагаем большие надежды на эти спецификации. Тот факт, что все основные браузеры реализовали эти запросы (кроме, конечно, IE), делает наше будущее еще более оптимистичным.
«Так что же делать?»
С точки зрения разработчика, мы ищем решение, которое будет наиболее простым в использовании и обслуживании.
С точки зрения UX, мы ищем решение, которое было бы наиболее приятным для пользователя.
Это означает, что на устройствах с сенсорным экраном не будут использоваться hover-эффекты. Особый случай здесь — это ноутбуки с сенсорными экранами. Однако мы можем предполагать, что на таких ноутбуках большую часть времени используется тачпад или компьютерная мышь. Даже если hover-эффект зависает, пользователь может легко использовать мышь / сенсорную панель, чтобы устранить проблему. К счастью, ноутбуки со съемными сенсорными экранами переходят в режим планшета после отсоединения. А это значит, что медиазапрос все правильно обработает и никаких проблем не возникнет.
Вот тестовый сайт, на котором вы можете протестировать свое устройство, чтобы узнать, какие из этих медиазапросов применимы к нему, а также просмотреть настройки некоторых наиболее популярных устройств. Браузеры на Android имеют некоторые несоответствия, но другие устройства, кажется, разбираются с ними.
Проблемы с псевдоклассом :hover начались еще с тех пор, как на сенсорных устройствах был установлен первый браузер. Конечно, проблемы пытались решить и решали, но полноценным решением это вряд ли можно было назвать. Однако с новыми медиазапросами (Media Queries) 4 уровня проблема, кажется, решена окончательно.
“Хм … а в чем, собственно говоря, заключается проблема?”
Допустим, вы просто добавили псевдокласс :hover к элементу вашей веб-страницы. Следовательно, когда пользователь наводит курсор мыши на этот элемент, то он активирует некоторые правила CSS и меняет свой внешний вид. Легче легкого!
Однако на сенсорном экране с псевдоклассом :hover возникают проблемы: после того, как нажатие выполнено, эффект наведения закрепляется на элементе. Более того, это происходит, даже тогда, когда элемента не касались напрямую. Например, когда пользователь в процессе прокрутки страницы задевает элемент и его отображение меняется, согласно CSS правилам :hover.
Такая же проблема возникает при перетаскивании пользователем элементов с :hover по веб-странице. Это происходит, потому что технически — ваш палец (или стилус) и есть указатель, который и активирует :hover. Но проблема состоит в том, что даже после прекращения перетаскивания элемента — эффекты, активированные :hover, остаются.
Подобное поведение элементов может запутать пользователя и подобная практика будет отрицательно сказываться на вашем продукте. Эту проблему необходимо как-то решить.
“Не может же быть, чтобы эту проблему не пытались как-то решить…”
Да, определенные решения выдвигались. Лучшим из них было использование JavaScript для определения наличия сенсорного экрана и последующее применение класса к body . После чего, добавляя к какому-либо элементу псевдокласс :hover, будет происходить явное обращение к этому классу.
Однако подобное решение имеет несколько недостатков:
- Разработчик может создать JS-сценарий обнаружения, который работает сегодня, но что с ним будет через пару месяцев, когда появится какая-то новая технология? Ноутбуки с сенсорными экранами? Съемные сенсорные экраны? Apple Pencil? Никто не хотел бы беспокоиться об этом во время разработки.
- Использование основанного на компонентах JS-фреймворка с инкапсулированными стилями неудобно. Так как каждый раз, когда активируется :hover, стили этого элемента должны ссылаться на этот глобальный класс.
- Это решение может работать по-разному на разных устройствах. Возможно, что для специальных устройств придется придумывать специальное решение. Однако должен быть стандартизированный способ, работающий на всех устройствах.
Media Queries Level 4
Медиазапросы великолепны. Они в одиночку внедрили адаптивный веб-дизайн и их по праву считают краеугольным камнем современной мобильной веб-разработки. Организация W3C добавила функции взаимодействия с мультимедиа в качестве рекомендации для L4 Media Queries, которые мы можем использовать для распознавания устройств с сенсорным экраном.
Четвертый уровень медиазапросов включает в себя: hover , any-hover , pointer , any-pointer . Они предоставляют информацию о возможности применения hover и типе пользовательского ввода. Например, @media (hover: hover) будет true, если hover элемента активируется курсором мыши. А @media (any-pointer: coarse) будет true, если какой-либо ввод имеет ограниченную точность (например, касание по сенсору). Эти мультимедийные функции предоставляют достаточно информации для правильного взаимодействия с hover .
Одна из проблем заключается в том, что медиазапросы на данный момент являются рекомендательными. Это означает, что они могут измениться или даже быть удалены в любое время. Помните об этом при работе с ними. На данный момент это определенно работает, и мы возлагаем большие надежды на эти спецификации. Тот факт, что все основные браузеры реализовали эти запросы (кроме, конечно, IE), делает наше будущее еще более оптимистичным.
«Так что же делать?»
С точки зрения разработчика, мы ищем решение, которое будет наиболее простым в использовании и обслуживании.
С точки зрения UX, мы ищем решение, которое было бы наиболее приятным для пользователя.
Это означает, что на устройствах с сенсорным экраном не будут использоваться hover-эффекты. Особый случай здесь — это ноутбуки с сенсорными экранами. Однако мы можем предполагать, что на таких ноутбуках большую часть времени используется тачпад или компьютерная мышь. Даже если hover-эффект зависает, пользователь может легко использовать мышь / сенсорную панель, чтобы устранить проблему. К счастью, ноутбуки со съемными сенсорными экранами переходят в режим планшета после отсоединения. А это значит, что медиазапрос все правильно обработает и никаких проблем не возникнет.
Вот тестовый сайт, на котором вы можете протестировать свое устройство, чтобы узнать, какие из этих медиазапросов применимы к нему, а также просмотреть настройки некоторых наиболее популярных устройств. Браузеры на Android имеют некоторые несоответствия, но другие устройства, кажется, разбираются с ними.
Я применил вышеуказанный стиль на одной из своих страниц, который отлично работает в Firefox, IE 7.0+ и в других последних версиях браузеров. Но когда я применяю тот же стиль на другой странице, он не работает.
Кто-нибудь может сказать мне, в чем может быть причина? почему он не работает на другой странице.
Я получил ответ, почему: hover не работает на другой странице. Фактически на второй странице тег DOCTYPE не был добавлен на страницу HTML, как показано ниже,
Раньше это был простой тег <html> , из-за которого: hover на div не работал. После добавления тега doctype, как показано выше, он работает для меня.
Спасибо всем за помощь.
Просто была аналогичная проблема. Убедитесь, что вы правильно укладываете! То есть z-index.
Если он работает в одном месте, но не в другом, значит, он либо неправильно вызывается, либо применяется неправильно.
Используйте Firebug и посмотрите, какими свойствами действительно обладает элемент, который должен иметь стили. Затем проверьте имена классов на предмет опечаток. Обычно это решает проблему, как описано.
Кроме того, в IE6 :hover работает только с элементами a . Запомни.
Я согласен с Брэндоном.
Если вы удалите:
Раздел из ваших строк, чтобы он выглядел так:
Вы можете обнаружить, что это будет работать на другой вашей странице.
Почему? Потому что вы определили эти стили как «классы». Классы намерены многократно применять один и тот же стиль.
Помещая перед ним «div.ycontent», вы, по сути, «ограничиваете» / не используете потенциал притяжения CSS-классов.
Может быть, вложенный div на другой странице не имеет класса ycontent и / или сам элемент не является классом ppclising?
У меня только что было position: absolute для родительского break my: hover's, хотя, похоже, это не проблема для бабушки и дедушки. Я новичок во всем этом, поэтому не знаю, нормально это или нет.
Поправка: это оказалось для меня проблемой с z-индексом. Мне нужно было поставить -1 для родителя, 0 для всех братьев и сестер с указанной позицией и 1 для div, для которых я хотел, чтобы активность зависала.
Проблемы с псевдоклассом :hover начались еще с тех пор, как на сенсорных устройствах был установлен первый браузер. Конечно, проблемы пытались решить и решали, но полноценным решением это вряд ли можно было назвать. Однако с новыми медиазапросами (Media Queries) 4 уровня проблема, кажется, решена окончательно.
“Хм … а в чем, собственно говоря, заключается проблема?”
Допустим, вы просто добавили псевдокласс :hover к элементу вашей веб-страницы. Следовательно, когда пользователь наводит курсор мыши на этот элемент, то он активирует некоторые правила CSS и меняет свой внешний вид. Легче легкого!
Однако на сенсорном экране с псевдоклассом :hover возникают проблемы: после того, как нажатие выполнено, эффект наведения закрепляется на элементе. Более того, это происходит, даже тогда, когда элемента не касались напрямую. Например, когда пользователь в процессе прокрутки страницы задевает элемент и его отображение меняется, согласно CSS правилам :hover.
Такая же проблема возникает при перетаскивании пользователем элементов с :hover по веб-странице. Это происходит, потому что технически — ваш палец (или стилус) и есть указатель, который и активирует :hover. Но проблема состоит в том, что даже после прекращения перетаскивания элемента — эффекты, активированные :hover, остаются.
Подобное поведение элементов может запутать пользователя и подобная практика будет отрицательно сказываться на вашем продукте. Эту проблему необходимо как-то решить.
“Не может же быть, чтобы эту проблему не пытались как-то решить…”
Да, определенные решения выдвигались. Лучшим из них было использование JavaScript для определения наличия сенсорного экрана и последующее применение класса к body . После чего, добавляя к какому-либо элементу псевдокласс :hover, будет происходить явное обращение к этому классу.
body.nontouch nav a:hover background: yellow;
>
Однако подобное решение имеет несколько недостатков:
- Разработчик может создать JS-сценарий обнаружения, который работает сегодня, но что с ним будет через пару месяцев, когда появится какая-то новая технология? Ноутбуки с сенсорными экранами? Съемные сенсорные экраны? Apple Pencil? Никто не хотел бы беспокоиться об этом во время разработки.
- Использование основанного на компонентах JS-фреймворка с инкапсулированными стилями неудобно. Так как каждый раз, когда активируется :hover, стили этого элемента должны ссылаться на этот глобальный класс.
- Это решение может работать по-разному на разных устройствах. Возможно, что для специальных устройств придется придумывать специальное решение. Однако должен быть стандартизированный способ, работающий на всех устройствах.
Media Queries Level 4
Медиазапросы великолепны. Они в одиночку внедрили адаптивный веб-дизайн и их по праву считают краеугольным камнем современной мобильной веб-разработки. Организация W3C добавила функции взаимодействия с мультимедиа в качестве рекомендации для L4 Media Queries, которые мы можем использовать для распознавания устройств с сенсорным экраном.
Четвертый уровень медиазапросов включает в себя: hover,any-hover, pointer, any-pointer. Они предоставляют информацию о возможности применения hover и типе пользовательского ввода. Например, @media (hover: hover) будет true, если hover элемента активируется курсором мыши. А @media (any-pointer: coarse) будет true, если какой-либо ввод имеет ограниченную точность (например, касание по сенсору). Эти мультимедийные функции предоставляют достаточно информации для правильного взаимодействия с hover.
Одна из проблем заключается в том, что медиазапросы на данный момент являются рекомендательными. Это означает, что они могут измениться или даже быть удалены в любое время. Помните об этом при работе с ними. На данный момент это определенно работает, и мы возлагаем большие надежды на эти спецификации. Тот факт, что все основные браузеры реализовали эти запросы (кроме, конечно, IE), делает наше будущее еще более оптимистичным.
«Так что же делать?»
С точки зрения разработчика, мы ищем решение, которое будет наиболее простым в использовании и обслуживании.
С точки зрения UX, мы ищем решение, которое было бы наиболее приятным для пользователя.
Это означает, что на устройствах с сенсорным экраном не будут использоваться hover-эффекты. Особый случай здесь — это ноутбуки с сенсорными экранами. Однако мы можем предполагать, что на таких ноутбуках большую часть времени используется тачпад или компьютерная мышь. Даже если hover-эффект зависает, пользователь может легко использовать мышь / сенсорную панель, чтобы устранить проблему. К счастью, ноутбуки со съемными сенсорными экранами переходят в режим планшета после отсоединения. А это значит, что медиазапрос все правильно обработает и никаких проблем не возникнет.
Вот тестовый сайт , на котором вы можете протестировать свое устройство, чтобы узнать, какие из этих медиазапросов применимы к нему, а также просмотреть настройки некоторых наиболее популярных устройств. Браузеры на Android имеют некоторые несоответствия, но другие устройства, кажется, разбираются с ними.
Читайте также: