Кнопка при наведении меняет цвет css: html — Цвет кнопки при наведении, отличный от класса в css
Как изменить цвет кнопки только при наведении на нее?
Это то, что я использую? Кажется, это не работает.
<style>
button:hover {
background-color : red;
}
</style>
html
css Поделиться Источник Aamir 24 марта 2015 в 12:36
2 ответа
2
Возможно, вы также хотите настроить таргетинг на <input type="submit">
и другие кнопки.
Вы можете сделать это с помощью нескольких селекторов:
button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
background-color: red;
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
background-color: red;
}
<button>Button</button> <input type="button" value="Button" />
См. Пример http://jsfiddle.net/toothbrush7777777/zqgypwzb/1/ .
Поделиться Toothbrush 24 марта 2015 в 12:41
0
Все в порядке с вашим кодом, но, возможно, это может быть возможно для переопределения, если это переопределение, вы можете добавить новый класс к кнопке и выбрать кнопку в css, используя имя класса кнопки.
HTML:
<button>Button</button>
CSS:
button.test:hover{
background-color: red;
}
FIDDLE
Похожие вопросы:
Как изменить градиент кнопки при наведении на нее курсора мыши
Как можно изменить градиент при наведении курсора мыши на кнопку? Смотрите кнопки Read More здесь, чтобы увидеть этот эффект в действии: https://carney.co/daily-carnage/ . Обратите внимание, как при…
Как изменить цвет кнопки при наведении на нее курсора?
Я знаю, что этот вопрос, вероятно, задавался много раз, но я видел некоторые ответы и действительно не понимаю. В принципе, я хочу изменить цвет кнопки при наведении на нее курсора. Вот мой код CSS…
Как изменить цвет кнопки при нажатии на нее
У меня есть поле кнопки. его цвет-красный. когда я нажимаю на нее, цвет кнопки должен измениться на черный, как это сделать?
Google Apps Script: как изменить цвет текста метки при наведении курсора?
Я использую Google Apps Script и относительно новичок в нем. Мне интересно, есть ли способ изменить цвет текста для метки при наведении на нее курсора мыши? Например, как иногда гиперссылки меняют…
Установите цвет BG кнопки на ttransparent при наведении курсора мыши
Как я могу изменить цвет фона этой кнопки при наведении/нажатии на нее? Вот это изображение: http://i.minus.com/ib0pWwQBJ6nlW9.JPG
Как изменить название кнопки при наведении мыши
Q-когда для кнопки используется действие наведения мыши (N.B: кнопка имеет имя-текст, который она показывает в разделе свойства — мы хотим изменить это имя при наведении мыши на нее, а также…
CSS цвет кнопки только изменить цвет фона слова нет целой кнопки при наведении курсора
Я хочу, чтобы кнопка при наведении меняла цвет фона, но моя кнопка css меняет только цвет фона слова, а не весь цвет кнопки при наведении. Что-то не так в моем css? фрагмент добавлен .popup1_btn {…
Как изменить цвет звезды при наведении на нее курсора в Woocommerce обзорах?
как изменить стрелку и поставить вместо нее треугольник в react-select и при наведении изменить цвет?
как изменить стрелку и поставить вместо нее треугольник в react-select и при наведении изменить цвет? <Select styles={customStyles} defaultValue={[colourOptions[2], colourOptions[3]]} isMulti…
Как сделать ссылку внутри кнопки Изменить цвет при наведении курсора без наведения курсора на ссылку
Моя ссылка меняет цвет при наведении на нее непосредственно но не меняет цвет при наведении на кнопку а не на ссылку непосредственно btn:hover{ color: black; } Это не работает. a:hover{ color:black…
CSS Button Меняется Цвет При Наведении Мыши
У меня есть контактная форма, созданная плагином wpforms. Там он хочет, чтобы я ввел любое имя класса в пустое поле, чтобы изменить все, что я хочу. Допустим, я хочу изменить цвет фона submit button
Код css, который я создал, таков
.contactform1 button[type=submit] {
background-color: #b49543;
}
у меня есть это, но этот код почему-то не работает. Может быть, это из-за приоритета классов, но я не мог понять этого.
Не могли бы вы мне помочь, пожалуйста ? Заранее благодарю вас!
Поделиться Источник André Yuhai 02 марта 2017 в 03:25
3 ответа
- sencha touch3: указатель мыши меняется на курсор при наведении на button
Я заметил некоторые проблемы с моими пуговицами. Я создал button, и при наведении курсора мыши указатель мыши меняется на курсор. Я знаю, что в мобильном телефоне у нас не будет курсора, поэтому этой проблемы не будет, но я хочу знать, есть ли возможное решение для этого при тестировании в…
- только частичное изменение текста при наведении курсора мыши на button
2
Сделайте это следующим образом используйте :hover
селектор css
.contactform1:hover {
background-color: #b49543;
}
Поделиться Mandarr Sant
2
Поставьте :наведите курсор на button.
.contactform1 button:hover{
background-color: #b49543;
}
Поделиться Dubliyu 02 марта 2017 в 03:28
2
Вот фрагмент того, как это выглядит с атрибутом наведения. Как вы можете видеть, это не влияет на входные данные button или другие типы button.
.contactform1 button[type=submit]:hover {
background-color: #b49543;
}
<div> <button type="submit">button Submit</button> <input type="submit" value="input Submit" /> <button type="reset">button Reset</button> <button type="button">button Button</button> </div>
Обновление в ответ на OP: CSS следует за методологией структурирования данных «Сначала в первую очередь». Таким образом, вы можете ожидать, что этот тип потока будет происходить, когда вы имеете дело с вашим CSS. Попробуйте поставить конкретный CSS после всего остального.
Дальнейшие обновления: Я взглянул на ваш скриншот. Похоже, вам не нужен указатель типа button. просто используйте
.contactform1:hover{ background-color: #b49543; }
Это происходит потому, что все они являются частью одного и того же элемента DOM. Если вы попытаетесь вызвать его как по типу элемента DOM, так и по классу, он будет думать, что button находится внутри .contactform1.
Поделиться MrAmazing 02 марта 2017 в 03:43
- CSS стиль-цвет заголовка при наведении мыши
Кто — нибудь может помочь мне с этим кодом css для расширения Joomla 2.5-слайдера заголовка новости RSS. У него очень плохой стиль css — #RSS-SHOW-SETTING1 p { width:100%; vertical-align:middle; padding-top:3px; padding-bottom:3px; } который отображает мне заголовки, которые являются белыми при…
- при наведении мыши цвет текста не меняется
Я знаю простой вопрос, но цвет текста не менялся при наведении курсора мыши на меню. Я знаю, что пропустил одно место. Но я хочу помочь тебе. Это ссылка на демо-страницу: CodePenio Меню, указывающее на изменение цвета фона, но цвет текста не меняется. При наведении курсора мыши на пункт меню Цвет…
Похожие вопросы:
datagridview ячейки при наведении мыши меняется цвет фона
я хочу изменить задний цвет ячейки в datagridview при наведении курсора мыши на конкретную ячейку. Пробовал код: private void dataGridView_whateventwillcomehere(object sender,…
Предотвратить переход CSS Hover при наведении мыши
Я создал кнопку с помощью CSS,в которой цвет фона становится светлее при наведении мыши и сразу же становится темнее при наведении мыши. Проблема в том, что я хочу поддерживать состояние зависания…
Стоп button изменение цвета при наведении курсора мыши
ok..this очень strange….i определили button, на самом деле 5 кнопок, и каждая имеет свой цвет, но при наведении мыши они просто меняют цвет на тот ледяной синий color….i попытался переопределить…
sencha touch3: указатель мыши меняется на курсор при наведении на button
Я заметил некоторые проблемы с моими пуговицами. Я создал button, и при наведении курсора мыши указатель мыши меняется на курсор. Я знаю, что в мобильном телефоне у нас не будет курсора, поэтому…
только частичное изменение текста при наведении курсора мыши на button
Я бы хотел, чтобы цвет шрифта текста в button изменился на белый и без подчеркивания при наведении курсора на button. На данный момент цвет текста меняется только тогда, когда вы наводите курсор на…
CSS стиль-цвет заголовка при наведении мыши
Кто — нибудь может помочь мне с этим кодом css для расширения Joomla 2.5-слайдера заголовка новости RSS. У него очень плохой стиль css — #RSS-SHOW-SETTING1 p { width:100%; vertical-align:middle;…
при наведении мыши цвет текста не меняется
Я знаю простой вопрос, но цвет текста не менялся при наведении курсора мыши на меню. Я знаю, что пропустил одно место. Но я хочу помочь тебе. Это ссылка на демо-страницу: CodePenio Меню, указывающее…
Button цвет не меняется при наведении мыши на button
Я написал следующий код XAML. Я добавил код стиля, чтобы изменить цвет button, когда мышь наведена на button. Но хотя эффект границы присутствует при наведении курсора на button, фон не меняется на…
Меняется Цвет При Наведении Мыши CSS
На этом сайте есть 4 вкладки на главной странице. Как я могу изменить зелено-голубоватый цвет при наведении курсора мыши на вкладку? a { -webkit-transition-property: color; -moz-transition-property:…
JavaFX/CSS: скрасьте оригинальный цвет кнопки при наведении курсора мыши
У меня есть множество кнопок, каждая со своим собственным цветом фона (-fx-background-color: rgb (xxx,xxx,xxx). Цвета кнопки определяются в файлах .fxml. Теперь я хотел бы определить в файле .css…
Кнопка, изменяющая свой цвет при наведении на нее курсора
72
203
Примеры переливающихся и меняющих свой цвет текстов мы уже рассматривали ранее. Теперь на очереди стоят кнопки (input type=»button»). Рассмотрим JavaScript код, позволяющий изменять цвет кнопки при наведении на нее курсора мышки.
Собственно вот так выглядит пример работы рассматриваемого скрипта:
Для получения таких кнопок, изменяющих свой цвет текста при наведении курсора мышки, поместите следующий скрипт в начало Вашей странички:
JavaScript код:
<script type="text/javascript">
function color_button(x) {
if ("INPUT"==event.srcElement.tagName) event.srcElement.className=x;
}
</script>
Далее необходимо добавить форму, содержащую кнопки, цвет которых планируется менять, следующим образом:
HTML код:
<form name="primer" align="center" onmouseover="color_button('start')"
onmouseout="color_button('')">
Наведите курсор мыши на одну из кнопок!<br>
<input type="button" value="Кнопка № 1">
<input type="button" value="Кнопка № 2">
<input type="button" value="Кнопка № 3">
</form>
Еще не забудьте вставить в заголовок странички (между тегами <head> и </head>) стиль, который будет применен к нашим кнопкам при наведении на них курсора мышки:
HTML код:
<style type="text/css">
.start { color: yellow; background: green; }
</style>
В результате у Вас все кнопки, описанные, как показано Выше, должны изменять свой цвет, при наведении на них курсора мышки.
Дата создания: 14:10:21 03.07.2011 г.
Дата обновления: 22:36:47 08.03.2012 г.
Посещений: 20398 раз(а).
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Оформляйте стили наведения, фокуса и активного состояния по-разному / Хабр
В течение многих лет я оформлял состояния элементов
:hover
,
:focus
и
:active
одинаково. Не помню точно, когда именно начал это делать. Но это далеко не лучший подход. Почему, постараюсь объяснить в этой статье.
Вот пример кода, который всегда использовал.
.selector {
&:hover,
&:focus,
&:active {
...
}
}
Когда я стал уделять больше внимания доступности интерфейса при работе с клавиатуры (состоянию фокуса в частности), пришел к выводу, что мы не должны одинаково стилизовать разные состояния элементов.
Наведение, фокус и активное состояние должны стилизоваться по-разному.
Причина проста: Это разные состояния!
Сегодня я хочу продемонстрировать вам волшебный способ оформить все три состояния без особых усилий.
Давайте начнём с :hover
.
Стилизация наведения (:hover)
:hover
срабатывает, когда пользователь наводит на элемент курсор мыши.
Обычно это состояние заключается в изменении цвета фона background-color
и/или текста color
. Различия не обязательно должны быть очевидными, потому что пользователи и так знают, что навели курсор на какой-то элемент.
button {
background-color: #dedede;
}
button:hover {
background-color: #aaa;
}
Стилизация фокуса (:focus)
:focus
срабатывает, когда элемент получает фокус. Это достигается двумя способами:
- при выборе элемента кнопкой «Tab»
- при щелчке на элемент мышью
К фокусным элементам относятся:
- Ссылки (
<a>
) - Кнопки (
<button>
) - Элементы формы (
<input>
,<textarea>
и т.д) - Элементы с атрибутом
tabindex
Следует помнить о некоторых важных моментах:
- Пользователи не могут выбрать кнопкой «Tab» элемент с атрибутом
tabindex="-1"
, но могут кликнуть по нему мышью. Клик вызывает состояние фокуса. - В браузерах Safari и Firefox Mac OS клик не вызывает фокус у элементов
<button>
- При клике на ссылку <a>, фокус остаётся на ней, пока нажата кнопка мыши. Когда вы отпускаете кнопку, фокус перенаправляется в другое место, если в атрибуте
href
указан существующий на этой же страницеid
Стилизуя состояние фокуса, мы больше заботимся о пользователях, работающих с интерфейсом с клавиатуры, чем о тех, кто использует мышь.
Когда пользователи нажимают «Tab», они не знают, к какому элементу перейдет фокус, а могут лишь предполагать. Вот почему нам нужно заметное изменение состояния — чтобы привлечь внимание пользователя на сфокусированный элемент.
В большинстве случаев оформление фокуса по умолчанию вполне подходит. Если вы хотите стилизовать его по-своему, помните об этих четырёх моментах:
- Добавление обводки (outline)
- Создание анимаций
- Изменение
background-color
- Изменение
color
Поскольку изменение свойств
background-color
и
color
часто производится при
:hover
, имеет смысл состояние
:focus
оформлять с помощью обводки или анимации.
Вы можете использовать комбинации свойств outline
, border
и box-shadow
для создания интересных стилей фокуса. Как это можно сделать, я описал в статье «Creating a custom focus style».
button {
background-color: #dedede;
}
button:hover {
background-color: #aaa;
}
button:focus {
outline: none;
box-shadow: 0 0 0 3px lightskyblue;
}
Стилизация активного состояния (:active)
При взаимодействии с чем-то в реальной жизни, вы ожидаете своего рода отклик. Например, при надавливании на кнопку, вы ожидаете, что она нажмётся.
На веб-сайтах этот отклик также полезен. Можно стилизовать момент «нажатия кнопки» с помощью :active
. Вызывается это состояние, когда вы взаимодействуете с элементом. Под взаимодействием в данном случае подразумевается:
- Удержание левой кнопки мыши на элементе (даже когда он не в фокусе)
- Удержание кнопки пробела (на кнопках)
button:active {
background-color: #333;
border-color: #333;
color: #eee;
}
Две особенности, которые следует принять к сведению:
- Удержание пробела вызывает состояние
:active
у кнопок (<button>), но при удержании Enter этого не происходит - Enter запускает ссылки но не вызывает активное состояние. Пробел не запускает ссылки вообще
Стили ссылок по умолчанию
Ссылки имеют стили активного состояния по умолчанию. При нажатии они становятся красными
Взаимосвязь между :active и :focus
При удержании левой кнопку мыши на фокусируемом элементе, вызывается его активное состояние. Но одновременно с этим вызывается и состояние фокуса.
Когда вы отпускаете левую кнопку мыши, фокус остаётся на элементе.
Это относится к большинству фокусируемых элементов, кроме ссылок и кнопок.
Для ссылок:
- При удержании левой кнопки мыши в Firefox и Chrome вызываются состояния
:active
и:focus
. В Safari – только состояние:active
(проверено только на Mac OS) - Если отпустить кнопку мыши,
:focus
остаётся на ссылке (если атрибутhref
не ссылается наid
на этой же странице). В Safari фокус возвращается на<body>
Для кнопок:
- Когда вы удерживаете левую кнопку мыши: оба состояния
:active
и:focus
вызываются только в Chrome. Состояние:focus
совсем не вызывается в Safari и Firefox (Mac). Я написал про это странное поведение здесь.
Если нужно, чтобы клики вызывали фокус для кнопок, нужно как можно раньше добавить этот JavaScript (для чего это нужно, можно прочитать в статье, ссылку на которую я указал выше).
document.addEventListener('click', event => {
if (event.target.matches('button')) {
event.target.focus()
}
})
Добавление этого кода изменит поведение нажатия кнопок на следующее:
- При удержании кнопки мыши,
:active
вызывается во всех браузерах,:focus
только в Chrome - Если отпустить кнопку мыши, вызывается
:focus
в Safari и Firefox (Mac OS).:focus
остаётся на кнопке во всех браузерах
Поведение кнопок в Safari после добавления фрагмента JS-кода
Теперь, когда вы знаете всё необходимое о состояниях hover, focus и active, я хочу поговорить о стилизации всех трёх
Волшебная комбинация
Волшебная комбинация
позволяет пользователям получать отклик, когда они наводят, фокусируются или взаимодействуютс элементом. Вот код, который вам нужен:
.element:hover,
.element:active {
/* Изменить цвет фона/текста */
}
.element:focus {
/* Показать обводку */
}
Для пользователей мыши:
- Когда пользователь наводит на элемент, меняется
background-color
(и/илиcolor
). Происходит отклик. - Когда пользователь кликает на элемент, показывается обводка фокуса. Происходит отклик.
Для пользователей клавиатуры:
- Когда пользователь выбирает элемент кнопкой Tab, показывается обводка фокуса. Происходит отклик.
- Когда они взаимодействуют с элементом, меняется
background-color
(и/илиcolor
). Происходит отклик.
Лучшее из обоих миров!
- Я не проверял тщательно магическую комбинацию.Это лишь аргумент в пользу этой концепции концепции. Буду признателен, если вы поможете мне проверить её и дадите знать о возможных проблемах.
- Если будете проверять, не используйте Codepen. Состояние фокуса для ссылок в Codepen ведёт себя очень странно. Если навести курсор на ссылку, обводка фокуса удалится. Почему? Я не знаю. Порой мне кажется, что лучше всего проверять подобные вещи без использования дополнительных инструментов. Просто старые добрые HTML, CSS, JS.
Не волшебная (но может даже лучше) комбинация
Как я упомянул выше, клики на кнопки имеют странное поведение в Safari и Firefox на Mac OS. Если вы добавили фрагмент JavaScript-кода, который я предлагал выше, магическая комбинация всё еще работает. Но не идеально.
Вот что произойдёт в Safari и Firefox на Mac OS:
- Когда пользователь держит кнопку мыши нажатой, ничего не меняется
- Когда пользователи отпускают кнопку, элемент получает фокус
Если вы считаете, что этого достаточно, то волшебная комбинация работает. Можете на этом и остановиться.
Но если вы считаете такое поведение недостаточно доступным, может возникнуть желание стилизовать состояния :hover
, :focus
и :active
по отдельности.
.element:hover {
/* Изменить цвет фона/текста */
}
.element:active {
/* Иные изменения в цвете фона и текста */
}
.element:focus {
/* Показать обводку */
}
Поведение кнопки в Safari, если были стилизованы все три состояния
Вот и всё! Благодарю за чтение и надеюсь, сегодня вы узнали что-то новое.
Блок кнопок — Страница 2 — Справка
Создание кнопки призыва к действию в классическом редакторе
Следующие инструкции предназначены для выполнения в классическом редакторе. Если вы используете интерфейс редактора блоков WordPress, щелкните эту ссылку.
Встроенные стили кнопок
Пользовательские CSS-стили кнопок
Встроенные CSS-стили кнопок
Советы и материалы для начала работы
↑ Содержание ↑
Встроенные стили кнопок
В некоторых темах доступны встроенные стили кнопок, которые можно применять для обычной ссылки. Для этого необходимо переключиться в вид HTML в редакторе сообщений или страницы и добавить в ссылку специальный CSS-стиль темы, называемый «класс», также известный как тег привязки.
Например, в теме Goran встроен стиль кнопок под названием (не удивляйтесь!) кнопки
. Вы можете добавить этот класс для ссылки, чтобы она выглядела следующим образом:
Вот как выглядит HTML-код для кнопки в примере:
<a href="https://gorandemo.wordpress.com/">Кнопка</a>
В демонстрационном примере Goran можно увидеть, что фон кнопки меняет цвет, если навести на нее курсор на настольном компьютере или ноутбуке. Этот вид при наведении курсора также определяется CSS-стилем в теме.
Узнать, имеется ли в той или иной теме встроенный стиль для кнопок, а также какое имя класса необходимо добавить в тег привязки, можно в его описании. Несколько примеров готовых стилей кнопок призыва к действию доступны в таких темах, как Edin, Gateway, Sequential, Pique и Karuna.
Если в теме нет встроенного стиля кнопок, можно создать кнопки с собственным стилем одним из следующих методов.
↑ Содержание ↑
Пользовательские CSS-стили кнопок
Если у вас пользовательский дизайн, доступный в тарифных планах WordPress.com Premium и Business, вы можете добавлять стили кнопок на CSS-панель настройщика.
Вот примеры некоторых основных стилей кнопок:
.button { display: inline-block; padding: 12px 24px; border-radius: 6px; border: 0; font-weight: bold; letter-spacing: 0.0625em; text-transform: uppercase; background: #615f8b; color: #fff; } /* Добавим новый цвет фона при наведении курсора, а текст оставим белым */ .button:hover, .button:focus, .button:active { background: #b7b6cd; color: #fff; }
HTML-код для тега привязки будет выглядеть очень похоже на первый пример:
<a href="YOUR-LINK-HERE">Подпишитесь на мою рассылку</a>
Просто замените текст YOUR-LINK-HERE на полный URL-адрес (адрес в Интернете) страницы, которую вы хотите показывать посетителям, вместе с префиксом http://
или https://
. Например, чтобы при переходе показать посетителю страницу оформления подписки на новостную рассылку, следует добавить ее URL-адрес.
Если вы используете блок кнопок в составе редактора блоков WordPress, вместо добавления кода кнопки необходимо добавить только новый CSS-класс для настройки блока кнопок в разделе Дополнительный CSS-класс.
Посмотрите, как будет выглядеть этот пример на вашем сайте.
Можно заметить, что текст кнопки написан заглавными буквами, поскольку мы указали верхний регистр в этой строке CSS-кода:
text-transform: uppercase;
Чтобы сохранить регистр текста таким, как указано при вводе, просто удалите эту строку.
Размещая части HTML-кода и CSS-кода по отдельности, можно добавлять один и тот же класс для нескольких кнопок для поддержания их согласованности и во избежание повторения CSS-кода. Это также полезно, если вы захотите что-то изменить впоследствии, например поменять цвет фона всех кнопок на оранжевый в канун Хеллоуина. Это можно сделать сразу для всех кнопок, изменив CSS-код только в одном месте.
↑ Содержание ↑
Встроенные CSS-стили кнопок
Если у вас нет пользовательского CSS-стиля, вы можете создать ссылку с базовым стилем кнопок, используя так называемые встроенные стили. Это означает, CSS-код стиля кнопки добавляется непосредственно в HTML-код. Для этого необходимо переключить редактор в режим просмотра HTML-кода.
Пример.
<a href="YOUR-LINK-HERE">Призыв к действию</a>
У этого метода есть несколько недостатков: усложняется чтение кода и устранение неполадок, весь CSS-код встроенного стиля необходимо повторять для каждой создаваемой кнопки, поэтому код все более усложняется при последующем внесении изменений. Кроме того, в таком режиме нельзя добавить стиль кнопки, отображаемый при наведении курсора.
Вот рабочая кнопка со встроенным CSS-стилем из нашего примера. При просмотре на настольном компьютере или ноутбуке попробуйте навести курсор на кнопку, чтобы увидеть, что ее стиль не изменился.
Подробные материалы
↑ Содержание ↑
Советы и материалы для начала работы
Данное руководство поможет вам начать работу над оформлением призыва к действию. Вот несколько важных аспектов, на которые следует обратить внимание.
Страниц: 1 2
:active — CSS | MDN
Псевдокласс :active
соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью — это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.
Также псевдокласс :active
срабатывает при использовании клавиши TAB на клавиатуре. Обычно это используется для HTML-элементов <a>
и <button>
, но может применяться и к другим элементам.
Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как :link
, :hover
и :visited
, описанными в последующих правилах. Чтобы стилизировать нужные ссылки, вам нужно ставить правило :active
после всех других правил, относящихся к ссылке, как определено правилом LVHA-порядком: :link
— :visited
— :hover
— :active
.
Примечание: В системах с много-кнопочными мышами, CSS 3 указывает, что псевдокласс :active
должен применяться только к первой кнопке; для праворуких мышей — это обычно самая левая кнопка.
Активные ссылки
HTML
<p>Этот абзац содержит ссылку:
<a href="#">Эта ссылка будет окрашена в красный, когда вы нажмёте на неё.</a>
У абзаца фон станет серым при нажатии на него или на ссылку. </p>
CSS
a:link { color: blue; }
a:visited { color: purple; }
a:hover { background: yellow; }
a:active { color: red; }
p:active { background: #eee; }
Результат
Активные элементы формы
HTML
<form>
<label for="my-button">Моя кнопка: </label>
<button type="button">Попробуй Нажать Меня или Мою подсказку!</button>
</form>
CSS
form :active {
color: red;
}
form button {
background: white;
}
Result
BCD tables only load in the browser
Псевдоклассы — Клеверенс — База знаний
Последние изменения: 15.06.2021
Выберите уточнение:
Псевдоклассы — это специальные команды, которые позволяют менять стиль элемента в зависимости от действий пользователя, а также положения этого элемента (тега) в общем потоке документа, что позволяет разбавить дизайн страницы некой динамикой и логикой.
Классическим примером применения псевдоклассов является ссылка, которая меняет свой цвет при наведении на неё курсора или ссылка, меняющая свой цвет после того, как по ней осуществили переход.
В Mobile SMARTS используются следующие псевдоклассы:
- hover (для кнопок и списков) — определяет стиль элемента, на который наведён курсор мыши.
- active (для кнопок и списков) — определяет стиль ссылки (элемента), которая становится активной, но переход по ней еще не совершен.
- disabled (для кнопок) — определяет стиль кнопки с атрибутом enabled= «False».
С помощью псевдоклассов в Mobile SMARTS можно делать динамичными кнопки и элементы списка. Для этого потребуется добавить строки кода (см. примеры ниже) в файл global.css, который находится на ПК в папке по пути «C:\ProgramData\Cleverence\Базы Mobile SMARTS\имя вашей базы\Documents» (путь указан по умолчанию). На ТСД этот файл дублируется, и может иметь названия global.css, global.android.css, global.cf.css.
Рассмотрим подробнее примеры кода для создания динамичных элементов.
-
Для кнопок.
Возьмем за образец кнопку «Выйти» в окне успешной активации лицензии для продукта Frontol Simple Mobile. С помощью псевдоклассов можно сделать эту кнопку всегда активной, всегда неактивной или подсвечивать другим цветом в момент длительного нажатия.
Код кнопки:
CSS
<button direction="return" ><r color="#EF5981">ВЫЙТИ</r></button>Css-класс white_button
CSS
{ .white_button:active } background-color: #FFFFFF; corner-radius: 4%; font-size:14dp; border: 0px solid #1F3C5B; color: white; padding: 10dp 16dp 9dp 16dp; -
Кнопка неактивна.
CSS
{ white_button:disabled } background-color: #6A7F8D; corner-radius: 4%; font-size:14dp; border: 0px solid #1F3C5B; color: white; padding: 10dp 16dp 9dp 16dp; } -
Кнопка меняет цвет при длительном нажатии.
CSS
{ .white_button:hover } background-color: #FFFFFF; corner-radius: 4%; font-size:14dp; border: 0px solid #1F3C5B; color: white; padding: 10dp 16dp 9dp 16dp; -
Для элементов списка.
При длительном нажатии элемент списка подсвечивается другим цветом. Реализуется с помощью псевдоклассов active, disabled.
CSS
.list_item_custom { background-color: #EDF2F6; padding:0dp 0dp 5dp 0dp; } .list_item_custom:active { background-color: #919191; padding:0dp 0dp 5dp 0dp; } .list_item_custom:disabled { background-color: #6A7F8D; padding:0dp 0dp 5dp 0dp; }
В данном случае псевдоклассами являются hover, active, disabled. Для каждого случая задан свой атрибут background-color, что позволяет гибко регулировать цвет фона кнопки для разных случаев.
После того как вы внесли правки в файл global.css на ПК, потребуется удалить из папки «MobileSMARTSv3 —> Documents» на ТСД папку базы, для которой вы вносили изменения, и заново подключиться к ней. В противном случае внесенные правки не будут применены к приложению на ТСД.
Была ли статья полезна?
CSS | Анимация для изменения состояния наведения кнопки / изображения
1. Чтобы изменить цвет / размер кнопки в состоянии наведения.
Подход:
- Установка анимации и продолжительности наведения курсора
- Установка цвета фона с помощью @keyframes
Синтаксис:
кнопка: наведение { имя-анимации: цвет фона; продолжительность анимации: 500 мс; } @keyframes background-color { 100% { цвет фона: # 4065F3; } }
Примеры:
HTML
|
Вывод:
Изначально кнопка выглядит так:
При наведении курсора на это
2.Для изменения цвета / размера изображения при наведении курсора
. Подход:
- Задайте анимацию и продолжительность наведения курсора.
- Задайте размер изображения с помощью @keyframes
Синтаксис:
img: hover { имя-анимации: ширина; продолжительность анимации: 500 мс; } @keyframes width { 50% { ширина: 400 пикселей; } 100% { ширина: 600 пикселей; } }
HTML
|
Вывод:
Первоначально размер изображения следующий:
При наведении его размер уменьшается до этого значения в половину времени:
до исходного размера по окончании периода времени:
Как Изменение цвета кнопки при наведении курсора с помощью CSS
Каждый элемент на веб-сайте считается важным с точки зрения взаимодействия с пользователем.Кроме того, представление веб-сайта - это еще один фактор, который оказывает значительное влияние на пользователей. Вот почему кнопки и другие интерактивные элементы должны быть удобными и красивыми.
Изменение цвета кнопок при наведении курсора выглядит впечатляюще и выглядит более престижно, чем одноцветные кнопки. Здесь мы обсудим, как изменить цвет фона кнопки с помощью простого CSS. Мы также должны выбрать цвет кнопки, соответствующий цвету нашего веб-сайта. Более того, цвет должен быть материальным, чтобы он выглядел элегантно для наших пользователей.
Изменить цвет фона кнопки при наведении курсора с помощью CSS
У нас есть атрибут : hover для управления событиями наведения курсора на элементы HTML через CSS.
Синтаксис
.class_name: hover {/ * строки CSS * /}
Пример 1
Изменить цвет кнопки при наведении курсора с помощью CSS - errorsea <стиль> .myButton { отступ: 10 пикселей 20 пикселей; цвет фона: # 1E88E5; граница: 0px; цвет: #fff; } .myButton: hover { цвет фона: #fff; граница: 1px solid # 1E88E5; цвет: # 1E88E5; }
Мы также можем добавить некоторые эффекты перехода, чтобы сделать его более плавным и удобным для пользователя.
Читайте также: Как применить эффект пульсации к кнопке с помощью CSS
Пример 2
В этом примере мы добавили небольшой эффект перехода при наведении курсора, чтобы сделать процесс изменения цвета фона более плавным и значимым.
Изменить цвет кнопки при наведении курсора с помощью CSS - errorsea <стиль> .myButton { отступ: 10 пикселей 20 пикселей; цвет фона: # 1E88E5; граница: 0px; цвет: #fff; переход: линейный 0,25 с; } .myButton: hover { цвет фона: #fff; граница: 1px solid # 1E88E5; цвет: # 1E88E5; }
Читайте также: Типы свойств Float и как использовать Float в CSS
Заключение
Я надеюсь, что теперь вы полностью понимаете, как изменить цвет кнопки при наведении курсора с помощью CSS.Это также довольно удобно, применяя эффект наведения на кнопки HTML для изменения фона.
Enjoy Designing 🙂
Как изменить цвет кнопки при наведении курсора с помощью CSS
Каждый элемент на веб-сайте считается важным с точки зрения взаимодействия с пользователем. Кроме того, представление веб-сайта - это еще один фактор, который оказывает значительное влияние на пользователей. Вот почему кнопки и другие интерактивные элементы должны быть удобными и красивыми.
Изменение цвета кнопок при наведении курсора выглядит впечатляюще и выглядит более престижно, чем одноцветные кнопки.Итак, здесь мы собираемся обсудить, как изменить цвет фона кнопки с помощью простого CSS. Мы также должны выбрать цвет кнопки, соответствующий цвету нашего веб-сайта. Более того, цвет должен быть материальным, чтобы он выглядел элегантно для наших пользователей.
Изменение цвета фона кнопки при наведении курсора с помощью CSS
У нас есть атрибут : hover для управления событиями наведения курсора на элементы HTML через CSS.
Синтаксис
.class \ _name: hover {
/ * Строки CSS * /
}
Пример 1
Изменить цвет кнопки при наведении курсора с помощью CSS - errorsea
<стиль>.myButton {padding: 10px 20px; цвет фона: # 1E88E5; граница: 0px; цвет: #fff; } .myButton: hover {background-color: #fff; граница: 1px solid # 1E88E5; цвет: # 1E88E5; }
Мы также можем добавить некоторые эффекты перехода, чтобы сделать его более плавным и удобным для пользователя.
Пример 2
В этом примере мы добавили небольшой эффект перехода при наведении курсора, чтобы сделать процесс изменения цвета фона более плавным и значимым.
Изменить цвет кнопки при наведении курсора с помощью CSS - errorsea
<стиль> .myButton {padding: 10px 20px; цвет фона: # 1E88E5; граница: 0px; цвет: #fff; переход: линейный 0,25 с; } .myButton: hover {background-color: #fff; граница: 1px solid # 1E88E5; цвет: # 1E88E5; }
Наслаждайтесь конструированием
Сообщение Как изменить цвет кнопки при наведении курсора с помощью CSS появилось первым на errorsea.
Изменить цвет кнопки наведения
Спасибо за использование треков!
Этот CSS заставит ссылки меню менять цвет при наведении на них:
.menu-primary ul a: hover,
.menu-primary ul a: активный,
.menu-primary ul a: focus {
цвет синий;
}
И если вы хотите, чтобы они оставались определенного цвета после посещения, вы также можете добавить этот CSS:
.menu-primary ul a: visit {
цвет синий;
}
Большое спасибо, у меня есть еще 2 небольших вопроса.
- У меня небольшая проблема, когда я меняю цвет фона своего веб-сайта с помощью следующего кода
кузов,
.excerpt,
.основной,
.menu-primary ul,
#шапка сайта {
фон: # 000;
}
Также меняет фон постов на главной странице сайта в мобильной версии. Вы знаете, как я могу это исправить?
- Второй вопрос: я хотел бы отображать как фиолетовый фильтр с низкой непрозрачностью на избранных изображениях на главной странице (которая установлена как архив блога), и я хочу, чтобы фильтр исчезал, когда вы наводите на него указатель мыши, я не знаю, ясно ли, ха-ха.
А можно сделать?
Большое спасибо 🙂
Вот обновленная версия этого кода, которая не влияет на фон сообщений на главной странице:
кузов,
.основной,
.menu-primary ul,
#шапка сайта {
фон: # 000;
}
Другая настройка на самом деле довольно проста с использованием псевдоэлемента, например:
.featured-image: после {
содержание: '';
позиция: абсолютная;
верх: 0;
справа: 0;
внизу: 0;
слева: 0;
фон: фиолетовый;
непрозрачность: 0.5;
переход: непрозрачность 0,2 с;
}
.featured-image: hover: after {
непрозрачность: 0;
}
Вы можете заменить «фиолетовый» на другой оттенок с помощью шестнадцатеричного кода. Непрозрачность установлена на 50% (0,5), и вы можете использовать диапазон от 0,1 до 1, чтобы изменить это. Наконец, я добавил переход, который длится 0,2 секунды, чтобы он выглядел более плавным, и вы можете изменить значение 0,2 секунды, чтобы сделать анимацию медленнее или длиннее, если хотите.
- Этот ответ был изменен 2 года 3 месяца назад Беном Сибли.
Стиль наведения, фокуса и активного состояния по-разному
16 октября 2019 Я стилизовал : hover
, : focus
и : active
таким же образом годами. Не могу вспомнить, когда я начала так укладывать. Вот код, который я всегда использую:
// Не лучший подход. Я объясню почему в этой статье
.selector {
&: навести,
&: фокус,
&: active {
// Стили здесь
}
}
По мере того как я уделял больше внимания доступности клавиатуры (и, следовательно, уделял больше внимания фокусировке), я начал думать, что мы не должны одинаково оформлять наведение, фокус и активные состояния.
Для состояний наведения, фокуса и активного состояния должны быть разные стили.
Причина проста: это разные государства!
Сегодня я хочу показать вам волшебный способ легко стилизовать все три состояния.
Начнем с : наведите курсор на
.
Стилизация состояний при наведении
: hover
срабатывает, когда пользователь наводит курсор мыши на элемент.
Состояния наведения обычно представлены изменением цвета фона
(и / или цвета
) .Разница в состояниях не должна быть очевидной, потому что пользователи уже знают, что они на что-то ориентируются.
кнопка {
цвет фона: #dedede;
}
button: hover {
цвет фона: #aaa;
}
Состояния фокуса стилей
: фокус
активируется, когда элемент получает фокус. Элементы могут получать фокус двумя способами:
- Когда пользователи переходят в фокусируемый элемент
- Когда пользователи нажимают на элемент, на который можно сфокусироваться
Фокусируемые элементы:
Вот несколько важных моментов, на которые следует обратить внимание:
- Пользователи не могут перейти к элементу с
tabindex = "- 1"
, но могут щелкнуть по нему. Щелчок вызывает фокусировку. - В Safari и Firefox (Mac) щелчки не фокусируются на элементе
- При нажатии на ссылку (
href
указывает на действительныйid
на той же странице.
кнопка {
цвет фона: #dedede;
}
button: hover {
цвет фона: #aaa;
}
button: focus {
наброски: нет;
box-shadow: 0 0 0 3px lightskyblue;
}
Стилизация активных состояний
- Удерживая левую кнопку мыши на элементе (даже на несфокусируемом)
- Удерживая клавишу пробел (на кнопках)
кнопка: активна {
цвет фона: # 333;
цвет границы: # 333;
цвет: #eee;
}
Две странные вещи, на которые следует обратить внимание:
- Удерживая нажатой клавишу пробела, активирует
: активен
на кнопках, но удерживание клавиши Enter - нет. - Ввести ссылки триггеров, но не создать активное состояние. Пробел вообще не запускает ссылки.
Стили по умолчанию для ссылок
Ссылки имеют активный стиль по умолчанию. Они становятся красными при нажатии.
Связь между активным и фокусным
Когда вы отпускаете левую кнопку мыши, фокус остается на элементе
👆 верно для большинства элементов, на которые можно сфокусироваться, кроме ссылок и кнопок.
- Когда вы удерживаете левую кнопку мыши: триггеры
: активны
и: фокус
состояние в Firefox и Chrome Активны только триггеры в Safari (проверено только на Mac) - Когда вы отпускаете левую кнопку мыши:
: фокус
остается на ссылке (еслиhref
ссылки не совпадает сid
на той же странице).В Safari фокус снова возвращается к
document.addEventListener ('click', event => {
if (event.target.matches ('button')) {
event.target.focus ()
}
})
После того, как у вас будет этот код, поведение кнопок при нажатии станет:
- Когда вы удерживаете левую кнопку мыши: запускает
: активен
во всех браузерах. Триггеры: фокус
только на Chrome. - Когда вы отпускаете левую кнопку мыши: запускает
: фокус
на Safari и Firefox (Mac).: фокус
остается на кнопке для других браузеров.
Теперь вы знаете о состояниях наведения, фокуса и активного состояния, я хочу поговорить о стилизации всех трех.
Волшебное сочетание
Волшебная комбинация позволяет пользователям получать обратную связь, когда они наводят курсор, фокусируются и взаимодействуют с элементом. Вот код, который вам нужен:
.элемент: парение,
.element: active {
/ * Изменить цвет фона / текста * /
}
.element: focus {
/ * Показать схему / *
}
Для пользователей мыши:
- Когда пользователь наводит курсор на элемент,
цвет фона
(и / илицвет
) изменяется.Они получают обратную связь. - Когда пользователь щелкает элемент, отображается контур фокуса. Они получают обратную связь.
Для пользователей клавиатуры:
- Когда пользователь входит в элемент, отображается контур фокуса. Они получают обратную связь.
- Когда они взаимодействуют с элементом,
цвет фона
(и / илицвет
) изменяется. Они получают обратную связь.
Лучшее из обоих миров!
- Я не тестировал полностью магическую комбинацию. Это проверка правильности концепции. Буду признателен, если вы поможете мне с тестами и дадите мне знать, как дела.
- Если вы запускаете тесты, не используйте Codepen. Состояния фокуса для ссылок на Codepen странные. Если вы наводите курсор на ссылку, контур фокуса удаляется. Почему? Я не знаю. Иногда я думаю, что лучше всего протестировать подобные вещи без каких-либо необычных инструментов. Просто старый HTML, CSS, JS.
Немагическая (но может быть лучше) комбинация
Как я уже упоминал выше, нажатие на кнопки ведет себя странно в Safari и Firefox (Mac).Если вы добавили фрагмент кода JavaScript, который я вам показал, волшебная комбинация все еще работает. Но это не идеально.
Для Safari и Firefox (Mac) происходит следующее:
- Когда пользователи удерживают кнопку мыши нажатой, ничего не меняется.
- Когда пользователь поднимает кнопку мыши, элемент получает фокус
Если вы думаете, что этого достаточно, то волшебная комбинация работает. Вы можете остановиться здесь.
Но если вы думаете, что возможностей недостаточно, вам нужно стилизовать : hover
, : focus
и : active
отдельно.
.element: hover {
/ * Изменить цвет фона / текста * /
}
.element: active {
/ * Еще одно изменение цвета фона / текста * /
}
.element: focus {
/ * Показать схему / *
}
Поведение кнопки в Safari, если вы стилизовали все три состояния.Вот и все! Надеюсь, вы узнали что-то сегодня!
Если вам понравилась эта статья, расскажите о ней другу! Поделитесь этим в Твиттере. Если вы заметили опечатку, я буду признателен, если вы сможете исправить ее на GitHub. Спасибо!
как изменить цвет на белый при наведении курсора на кнопку
Изменить цвет кнопки при наведении html
CSS Buttons, Изменение цвета кнопки при наведении · html css.Добрый день! Я понимаю, что этот вопрос задавали несколько раз. Я просмотрел здесь несколько тем, но 1. Введите "style =" в теге кнопки HTML, чтобы изменить стиль кнопки с помощью простого HTML. 2. Введите «background-color:», за которым следует название цвета или шестнадцатеричный код в разделе стиля вашего тега кнопки HTML или CSS, за которым следует точка с запятой. 3.
Изменение цвета кнопки при наведении курсора, Может ли кто-нибудь помочь мне изменить цвет фона моей кнопки. input [type = «submit»]: hover {цвет фона: синий; }.Cirediallo Ваш стиль наведения выглядит следующим образом: a.buttonStyle: hover {background: # 383; } Таким образом, он установлен специально для тега . Измените свой стиль на be.buttonStyle: hover {background: # 383; } Таким образом, вы устанавливаете наведение только на конкретный класс. Тогда это работает. См. Этот jsFiddle для демонстрации.
Изменить цвет кнопки при загрузке при наведении курсора
Эффекты при наведении кнопки Css
Цвет наведения кнопки Squarespace
Тест наведения кнопок
Button Hover Test, xxxxxxxxxx. 7. 1.