Как сделать чтоб hover после ухода мыши срабатывал
Обновлено: 08.07.2024
Я сделал кнопку с бакграундом (ну рамочкой вокруг кнопки .
И поставил на эту кнопку hover, чтобы при наведении курсора рамочка увеличивалась .
Так вот в чем проблема. Когда я навожу указатель мыши срабатывает увеличение рамочки нашей кнопки и весь контент, тот что снизу -либо пинается в низ . Скиньте кодик , или может кто знает в чем тут соль плз скажите
Либо задавайте кнопке в обычном состоянии такую же толщину рамки, с цветом transparent или цвет самой кнопки.
Либо используйте вместо border свойства outline или же box-shadow.
Я сталкиваюсь с небольшой проблемой, с которой мне никогда прежде не приходилось сталкиваться. Я начинающий веб-дизайнер, и недавно я использовал функцию наведения CSS в div на своей веб-странице. Другое изображение раскрывается, когда кто-то парит над этим делом; однако, новое изображение исчезает, когда вы "unhover", и я хотел бы, чтобы оно оставалось видимым.
Вот пример кода, который я использую:
Есть ли способ решить эту проблему, используя только CSS? До сих пор я не использовал никакой javascript, и мне это не очень удобно.
В любом случае любые решения будут с радостью приняты! Спасибо.
Здесь я иду с моей идеей CSS.
С чертой JavaScript это возможно, просто и надежно, как показано @ сдвиг ветра .
Pure CSS при и после наведения, однако, это намного сложнее и, в зависимости от того, какие браузеры вам нужно поддержка, невозможная в настоящее время жизнеспособным способом. Проблема в том, что все, что вы изменяете с помощью селектора псевдокласса: hover, не будет (и/или не должно) совпадать с элементами, над которыми вы больше не зависаете.
Я протестировал в нем Chrome последний, последний Firefox и IE 10. Работал во всех трех.
ОБНОВЛЕНИЕ: Леа Веру теперь также продемонстрировала эту технику в своем посте Плавная анимация состояния с animation-play-state
Вы не можете постоянно оставаться в состоянии наведения при использовании CSS, поскольку он просто определяет правила стилизации тегов, классов, идентификаторов, псевдоклассов и состояний. Так что, к сожалению, вам нужен Javascript для решения проблемы.
Будучи фанатом библиотека jQuery (хе-хе), вот мое решение.
Javascript с использованием JQuery
Событие one присоединяет обработчик к событию для элементов. Обработчик выполняется не более один раз для каждого элемента.
Демонстрация
Это должно быть сделано с помощью JavaScript, с помощью jquery вы можете постоянно добавлять стиль следующим образом:
Некоторые Чистые Идеи CSS
Я не совсем уверен, что вы намерены под "оставаться видимым". Вот некоторые разные мысли, основанные на ваших возможных целях, но у каждого есть возможные побочные эффекты, не предназначенные. Единственное чисто постоянное решение будет через JavaScript (как уже отмечали другие).
дольше "оставаться", но все еще не постоянно
Если вы имеете в виду оставаться видимым до тех пор, пока может зависать и само изображение , тогда сработает простое изменение в вашем коде:
Постоянное пребывание
Я не думаю, что есть какая-либо возможность сделать это с: hover, когда полагается на чистый CSS. Если вы настаиваете на использовании CSS, вы можете изменить его на щелчок. Таким образом, когда пользователь нажимает на элемент div, другой отображается постоянно. Так:
флажок позволяет вам щелкнуть его. если вы не хотите, чтобы проверить тип входа для радио.
лучшее решение - добавить или удалить классы к такому элементу (сделано с помощью JQUERY)
обратите внимание, что я изменил: наведите курсор на .hover (имя класса)
Просто случайно наткнулся на ответ на ваш вопрос. Смотрите пример CSS ниже:
второй номер/запись в функции перехода действует как функция разблокировки. По сути, ваш переход (ы) при наведении будет происходить и не будет возвращаться к нормальному состоянию до тех пор, пока не истечет период времени, указанный во второй записи (переход: 600 мс 3 с; - этот пример будет представлять вашу мышь, которая практически не зависает от элемента в течение 3 с ).
Надеюсь это поможет.
Вам НЕ нужен Javascript, как предлагают многие в этой теме. Вот как это сделать с помощью только CSS:
В данной статье на примере показано, как сделать на произвольном элементе сайта смену цвета, если на него был наведен курсор мышки.
Делается данная "штука" при помощи стилей CSS, т.е. придется добавить несколько строчек текста в файл стилей шаблона, а так же проявить свои дизайнерские способности. Я подскажу что именно добавить.
Обновлено 17.01.2019
Давайте сразу для наглядности пример, чтобы поняли о чем речь. Проведите мышкой по пунктам меню:
Как только мышка оказывается наведена на любое поле в списке - происходит смена заднего фона строки, а так же цвет текста/ссылки в названии рубрики сайта.
Вот так выглядит код данного блока:
В моем примере видим что эффект срабатывает на обычной ссылке. Вместо нее может быть контейнер
Чтобы сказать браузеру, что эффект нужно выполнять на конкретных ссылках, я взял их в отдельный
Практика
Теперь необходимо задать действие по наведению мышки. Как уже говорилось выше - делаем все при помощи стилей CSS (файл шаблона может называться style.css, css.css, core.css или еще как-то).
Чуть понятнее: мы указали что ссылка a должна находиться внутри контейнера с классом .catside . Далее мы добавили псевдокласс hover и оформили по правилам CSS.
Послесловие
В данной статье я показал как работает смена цвета элементов на самом обычном примере. Если хотите развиваться далее, то почитайте профильную литературу и справочники по CSS.
Использовать hover можно, практически, для всех элементов на сайте: блоки, текст, ссылки. Проявите немного фантазии и поймете как устроено у вас на сайте подобное. После этого сможете его украсить или сменить частично оформление.
Опять же о показанном примере: в нем не учитываются параметры оформления блока (отступы, размер шрифта, картинка и прочее). Это все можно узнать из моих предыдущих статей на блоге, либо воспользоваться консолью разработчика F12 в вашем браузере (как им пользоваться смотрите видео на моем канале YOUTUBE ).
Почти все веб-страницы меняют курсоры для лучшего восприятия пользователем или без какой-либо причины. Настройка курсора является простым способом добавления дополнительного эффекта на вашей веб-странице.
Для установления внешнего вида курсора используйте CSS свойство cursor. Это свойство используется для изменения вида курсора мыши cursor на элементах. Оно может быть полезным на веб-страницах в случае, когда кроме щелчка кнопкой нужно выполнить несколько действий.
Эта статья поможет вам контролировать, какими способами может курсор в CSS помочь в вопросе улучшения пользовательского восприятия.
Представим вам следующие методы контролирования курсора:
- Как сделать курсор в виде руки при наведении мыши на элемент списка
- Как изменить курсор гиперссылки при наведении мыши
- Как установить изображение для курсора
- Пример со всеми видами маркеров
Как сделать курсор в виде руки при наведении мыши на элемент списка
Код будет иметь следующий вид, если хотите установить курсор в виде указателя:
Давайте рассмотрим пример вышеуказанного метода:
Пример
Другой пример, где меняется курсор-указатель. Здесь мы используем селектор :nth-child вместе с nth-child(odd) как cursor: progress и nth-child(even) как cursor: pointer для отдельных типов курсора на разных элементах.
Пример
Как изменить курсор гиперссылки при наведении мыши
Известно, что курсор по умолчанию для гиперссылки устанавливается как "pointer". Если хотите изменить его, нужно указать тип курсора для элемента с помощью CSS селектора :hover.
Чтобы изменить "pointer" в "default", вам понадобится эта часть кода:
Смотрите следующий пример:
Пример
Так как ссылки имеют color: blue и text-decoration: underline по умолчанию, рекомендуется изменить цвет и продолжить работу с гиперссылками.
Как установить изображение для курсора
Давайте научимся, как еще можно работать с курсором! Можно также установить выбранное вами изображение как курсор на вашей веб-странице.
После этой части кода установите свойство cursor как image:
Не забудьте установить вид курсора, чтобы показать, когда браузер не сможет использовать предоставленное изображение. В противном случае, код не будет работать.
Это довольно интересный способ. Можете добавить его на вашу веб-страницу, и пользователи будут в восторге. Представьте, что у вас есть форма, которая соответствует определенной эмоции. Здесь отлично подойдет использование эмоджи.
Пример
Рассмотрим другой пример, где использованы иконки. Можете использовать их из веб-страниц, где возможно применить код Base64, просто вставляя этот код в URL значение курсора. Или можно загрузить иконку на вашу веб-страницу и использовать URL для установления курсора.
Читайте также: