Hover css html: CSS: Hover — эффекты при наведении

Разное 

html — Как добавить класс при hover на элемент с помощью css?

Вопрос задан

Изменён 30 дней назад

Просмотрен 35 раз

как добавить класс при hover? попробовал .el:hover.class{}; но не получилось, или это невозможно?

просто хотелось реализовать чтобы при ховере на прокручиваемого элемента сам body не скролился.

  • html
  • css

2

Вот как видите в примере, если наводите на блок с текстом, то только он скролится, но если вбок мышь поставите, то body начинает скролиться.
Также добавил при наведении скролл чтоб убирался у body при наведении на текстовый блок, но сразу скажу пока «:has» не поддерживается Firefox и некоторыми мобильными браузерами.

.scroll-content {
  display: block;
  width: 40%;
  height: 100vh;
  overflow: auto;
  box-sizing: border-box;
  border: 1px solid black;
}
body:has(.scroll-content:hover) {
  overflow: hidden;
}
<div>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et metus ac est malesuada fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam massa, viverra in velit ut, condimentum ullamcorper eros. Etiam tincidunt augue turpis, et lacinia velit malesuada eleifend. Ut congue tristique libero at varius. Cras malesuada ac libero nec lobortis. Mauris tincidunt lectus quis justo tempus, in mattis massa rhoncus. Donec rhoncus in sem id auctor. Praesent in pellentesque felis, in egestas ipsum. Proin ornare turpis fermentum laoreet pharetra. In sed nulla diam. Fusce nulla libero, ullamcorper vitae eros consectetur, pellentesque tristique est.
Morbi mattis nisi nec mauris tincidunt faucibus. Ut porta ipsum lorem. Praesent a dapibus arcu, ac sagittis nunc.

  
  Nulla interdum urna nunc. Pellentesque placerat orci augue, sodales viverra libero fermentum ac. Phasellus id ante nec neque varius viverra. Morbi laoreet diam nibh, eget elementum tortor sagittis sed. Sed mattis imperdiet odio, molestie egestas augue imperdiet a. In hac habitasse platea dictumst.
Donec sed ipsum vitae lorem cursus sollicitudin. Integer condimentum nunc in erat euismod luctus. Sed ac aliquam massa. Phasellus ultricies libero a interdum efficitur. Ut laoreet nisi risus, non molestie tortor faucibus a. Cras blandit nisi vitae odio bibendum, sed aliquet risus mollis. Aenean eu rhoncus libero, id lobortis sapien.
Donec vehicula luctus ante, ut consectetur nisi blandit non. Sed vel laoreet ex. Phasellus venenatis tellus at nulla auctor varius. Nulla eleifend iaculis ex sed sollicitudin. Etiam a fringilla ipsum. Aenean commodo consectetur nibh eu cursus. Integer viverra venenatis neque, quis sodales massa hendrerit nec. Etiam cursus ex metus, eget aliquet magna tincidunt nec.
 
 
 
Duis sed lectus ac nulla consequat semper vel et erat. Duis varius dictum pharetra. Nulla venenatis massa id ante efficitur, sit amet cursus risus tempus. Nulla ut efficitur ante. Morbi semper mi vel nisl consequat ullamcorper. Quisque felis nulla, sodales vitae elit in, mattis tempus metus. Donec neque turpis, vulputate sed hendrerit vitae, luctus eu lacus. In ullamcorper nunc dolor, in porta nibh aliquam feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.
  </p>
</div>

4

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

:hover, :focus, :active, или зачем указывать состояния элементам — журнал «Доктайп»

CSS-псевдоклассы :hover, :focus и :active задают элементам состояния, которые реализуются при определённых действиях пользователя. Состояния меняют цвет или размер элемента, добавляют ему рамку, делают более интерактивным, выделяют и указывают на его назначение.

В статье рассмотрим, в чём различия состояний, какие элементы важно выделять и как это влияет на доступность сайта.

Основные состояния интерактивных элементов

:hover

Состояние :hover срабатывает, когда пользователь наводит курсор на элемент. Часто используется для создания эффекта взаимодействия с элементом, например, при наведении на ссылку меняется цвет текста. Это даёт пользователю понять, что на элемент можно нажать и получить определённый результат.

<a href="#">Меню</a>
.link {
  color: #000000;
}

.link:hover {
  color: #00B3FF;
}
Состояние :hover

:focus

Состояние :focus срабатывает при клике на элемент или переходе на него с клавиатуры при помощи клавиши tab. Применяется состояния ко всем интерактивным элементам — <button>, <a>, <input>, <select> и элементам с tabindex.

Существует также состояние :focus-visible, которое возникает исключительно при фокусе с клавиатуры. Это состояние улучшает доступность сайта для пользователей с ограниченными возможностями. Если человек перемещается по интерфейсу с помощью клавиатуры, ему важно понимать, где он находится. Поэтому состояние фокуса рекомендуется делать как можно более заметным.

<ul>
  <li><a href="#">Меню</a></li>
  <li><a href="#">О компании</a></li>
</ul>
.link {
  color: #000000;
}

.link:focus {
  color: #00e48c;
  border: 1px solid blue;
}
Состояние :focus

:active

Состояние :active срабатывает, когда пользователь взаимодействует с элементом, например, когда удерживает кнопку мыши на элементе. Часто используется для создания эффекта «нажатия» на кнопку или ссылку. :active может не сильно отличаться по цвету, так как пользователь знает, с каким элементом взаимодействует.

<a href="#">Главная</a>
.link {
  color: #000000;
}

.link:active {
  color: #ea5454;
}
Состояние :active

Как состояния влияют на доступность сайта

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

Рекомендуется обязательно указывать состояния :hover, :focus и :active для всех интерактивных элементов, с которыми взаимодействует пользователь. Это позволяет создать доступный и понятный интерфейс.

В формах обратной связи состояние :focus используется для выделения активного поля при навигации с помощью клавиатуры. Это помогает пользователям с ограниченными возможностями корректно заполнять форму.

Разные состояния поля формы

Когда состояния элементов различаются, пользователю легко понять, где ссылка, а где сейчас находится фокус. Ссылкам лучше указывать разные цвета для

:hover и :active, чтобы пользователь мог отличить, какой элемент он выбрал.

Поэтому прописывать все состояния вместе не всегда хорошая идея:

.a:hover,
.a:focus,
.a:active {

}

Кроме того, в разных браузерах и операционных системах отображение состояний может отличаться, поэтому такой код не будет работать идеально. Лучше полностью разделять состояния и каждому давать свою стилизацию.

.a:hover {}
.a:focus {}
.a:active {}

Также состояния элементов могут использоваться для создания эффектов анимации и визуальных изменений на сайте. Например, при наведении на изображение можно увеличить его размер или добавить эффект тени.

Узнать больше о доступности сайтов и способах её улучшения вы можете на нашем специализированном курсе.

Материалы по теме

  • CSS-селекторы. Шпаргалка для новичков
  • Как убрать подчёркивание ссылок
  • Как сделать всплывающую подсказку

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

html — встроенный стиль, который действует как :hover в CSS

спросил

Изменено 1 год, 10 месяцев назад

Просмотрено 394 тыс. раз

Я знаю, что встраивание стилей CSS непосредственно в теги HTML, на которые они влияют, лишает CSS большей части смысла, но иногда это полезно для целей отладки, например:

 
asdf

Какой синтаксис для встраивания правила, например:

 a:hover {text-decoration: underline;}

в атрибут стиля тега A? Это явно не этот…

 бар

…поскольку это будет применяться все время, а не только во время наведения.

  • HTML
  • CSS

2

Боюсь, это невозможно сделать, селекторы псевдоклассов не могут быть установлены в строке, вам придется сделать это на странице или в таблице стилей.

Я должен отметить, что технически вы должны сделать это в соответствии со спецификацией CSS, но большинство браузеров не поддерживают это

Редактировать: Я только что провел быстрый тест с этим:

 < href="test. html">Тест

И это не работает в IE7, IE8 beta 2, Firefox или Chrome. Кто-нибудь еще может протестировать в других браузерах?

7

Если вы только отлаживаете, вы можете использовать javascript для изменения css:

 <а
   >бар

3

Простое решение:

 Моя ссылка

или

 <скрипт>
 /** Изменить стиль **/
 функция overStyle (объект) {
    object.style.color = 'оранжевый';
    // Изменяем некоторые другие свойства...
 }
 /** Восстанавливает стиль **/
 функция outStyle (объект) {
    object.style.color = 'оранжевый';
    // Восстанавливаем остальные...
 }

Моя ссылка

1

Если это для отладки, просто добавьте класс css для наведения (поскольку элементы могут иметь более одного класса):

 a. hovertest:hover
{
украшение текста: подчеркивание;
}
бла

1

Я собрал быстрое решение для тех, кто хочет создавать всплывающие окна при наведении без CSS, используя поведение onmouseover и onmouseout.

http://jsfiddle.net/Lk9w1mkv/

 
первое наведение курсора
вещи внутри

Если этот тег

создан из JavaScript, у вас есть другой вариант: использовать JSS для программной вставки таблиц стилей в заголовок документа. Он поддерживает '&:hover' . https://cssinjs.org/

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — удаление эффекта наведения css для одной ссылки при сохранении того же эффекта наведения для других ссылок

Задавать вопрос

спросил

Изменено 2 года, 11 месяцев назад

Просмотрено 443 раза

У меня есть следующий код в HTML:

 
                
                <дел>
                    
  • Ссылка 1
    • 
                    
  • Ссылка 2
    • 
                    
  • Ссылка 3
    •

    и следующий код в CSS:

     #side li a:hover{
  черный цвет;
}

    Я только недавно добавил в строку ССЫЛКУ НА ВНЕШНЮЮ СТРАНИЦУ , а ранее я настроил css так, чтобы при наведении курсора на ссылку 1, ссылку 2 и ссылку 3 текст становился черным, где раньше текст был белым.

    Текст для тега привязки «ССЫЛКА НА ВНЕШНЮЮ СТРАНИЦУ» также изначально белый, но, в отличие от других ссылок, я не хочу, чтобы он становился черным при наведении на него курсора. Я попытался добавить идентификатор в тег привязки ( ССЫЛКА НА ВНЕШНЮЮ СТРАНИЦУ ), а затем добавление css в этот идентификатор в таблице стилей (код внизу вопроса), чтобы сделать так, чтобы текст становился белым при наведении курсора (таким образом, стремясь сделать его не черным), но это не работает, и текст по-прежнему становится черным. Кто-нибудь знает, как этого добиться?

     #newid:hover{
  белый цвет;
}
    • HTML
    • CSS
    • наведение

    1

    Селектор, который вы пытались применить, имеет более низкую специфичность CSS.

    Решение: Используйте селектор с более высокой специфичностью, чтобы переопределить этот стиль.

    Например, вы можете использовать:

     .user-view > #newid:hover {
   белый цвет;
}

    или

     #side #newid:hover {
  белый цвет;
}

    или

     #side li .user-view a:hover {
  белый цвет;
}

    Здесь: https://specificity.keegan.st/ вы можете рассчитать специфичность вашего селектора.

     #side li a:hover{
  черный цвет;
}

    Имеет специфичность 1.1.2 где,

     #newid:hover{
  белый цвет;
}

    Имеет спецификацию 1.1.0, поэтому этот стиль, другими словами, был менее важен и, следовательно, не применялся.

    Здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity вы можете узнать больше об этом.

    4

    Вы пытались вместо этого добавить класс css?

     <дел>
    <ул>
        
  • 
            <дел>
                ССЫЛКА НА ВНЕШНЮЮ СТРАНИЦУ
    • <дел>
  • Ссылка 1
  • Ссылка 2
  • Ссылка 3

    • CSS

     .
    No related posts.
    Автор записи

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *