Почему не работает hover в css
Перейти к содержимому

Почему не работает hover в css

  • автор:

Не работает hover, как исправить?

Прохожу курс по HTML и CSS и увидел что результат на видео не соответсвует моему, я уже выяснил из-за чего это hover он не работает и не подсвечивается в ST3 уже весь интернет излазил и не могу найти решение ПОЧЕМУ НЕ РАБОТАЕТ ЭТО HOVER

.header < background-color: darkslateblue; height: 177px; font-size: 0.8em; margin-left: 0px; margin-right: 0px; min-width: 900px; >.main, .logo, .menubar, .site_content, .footer < margin-left: auto; margin-right: auto; >.logo < width: 880px; padding-bottom: 40px; >.logo h1, .logo h2 < font: normal 300% 'century gothic', arial, sans-serif; margin: 0 0 0 9px; >.logo_text h1, .logo_text h1 a, .logo_text h1 a:hover < padding: 22px 0 0 0; color: #fff; letter-spacing: 0.1em; text-decoration: none; >.logo_text h2 < font-size: 0.9em; padding: 4px 0 0 0; color: #999; >.menubar < width: 900px; height: 46px; >ul.menu < float: right; >ul.menu li < float: left; padding: 0 0 0 9px; list-style: none; margin: 1px 2px 0 0; >ul.menu li a < font: normal 120% 'trebuchet ms'; trebuchet ms; display: block; height: 20px; padding: 6px 35px; padding-left: 10px; color: #fff; text-decoration: none; >ul.menu li.selected a < color: #aeb002; >ul .menu li a:hover

1 ответов

У тебя в стилях где-то ошибка. В html вроде все нормально. Попробуй эти стили вставить и ховер заработает:

* < margin: 0; padding: 0; >body < font-size: 1.2em; background-color: #fff; color: #555; >p < padding: 0 0 20px 0; line-height: 1.7em; >input[type="text"], input[type="password"], input[type="search"] < color: #5d5d5d; width: 60%; padding: 8px; >input, textarea < outline: none; border: none; border: solid 1px #f2f2f2; >h1, h2 < font: normal 170% 'century gothic', arial; margin: 0 0 15px 0; padding: 15px 0 5px 0; color: #000; >h2 < font-size: 140%; >a, a:hover < outline: none; text-decoration: underline; color: #aeb002; >ul < margin: 2px 0 22px 17px; >ul li < margin: 0 0 6px 0; padding: 0 0 4px 5px; line-height: 1.5em; >.header < background-color: darkslateblue; height: 177px; font-size: 0.8em; margin-left: 0px; margin-right: 0px; min-width: 900px; >.main, .logo, .menubar, .site_content, .footer < margin-left: auto; margin-right: auto; >.logo < width: 880px; padding-bottom: 40px; >.logo h1, .logo h2 < font: normal 300% 'century gothic', arial, sans-serif; margin: 0 0 0 9px; >.logo_text h1, .logo_text h1 a, .logo_text h1 a:hover < padding: 22px 0 0 0; color: #fff; letter-spacing: 0.1em; text-decoration: none; >.logo_text h2 < font-size: 0.9em; padding: 4px 0 0 0; color: #999; >.menubar < width: 900px; height: 46px; >ul.menu < float: right; >ul.menu li < float: left; padding: 0 0 0 9px; list-style: none; margin: 1px 2px 0 0; >ul.menu li a < font: normal 100% 'trebuchet ms', sans-serif; display: block; height: 20px; padding: 6px 35px 5px 28px; color: #fff; text-decoration: none; >ul.menu li.selected a < color: #aeb002; >ul.menu li a:hover < color: #e4ec04; >hr < border: solid 1px #f3f3f3; >.site_content < width: 880px; overflow:hidden; margin: 20px auto 0 auto; background-color: white; >.sidebar_container < float: right;; width: 224px; >.sidebar < float: right; width: 222px; padding: 5%; margin: 0 0 16px 0; border: solid 1px #f2f2f2; border-radius: 5px; background-color: #f9f9f9; >.btn < padding: 8px; background-color: white; cursor:pointer; >.sidebar h2 < color: #136cb2; >.lables_passreg_text < font-size: 0.7em; margin-top: 3%; margin-left: 2%; >.sidebar ul < margin: 0; >.sidebar ul li < list-style-type: none; margin: 0 0 0 0; >.sidebar .rating_sidebar < float: right; >.content < text-align: left; width: 620px; padding: 0 0 0 5px; float: left; >.content a < text-decoration: none; >.films_block < margin-bottom: 5%; >.films_block img < border-radius: 5px; border: solid 5px #dad7d5; width: 22%; >.posts .posts_content < font-size: 0.8em; >.footer < width: 100%; height: 100px; padding: 28px 0 5px 0; text-align: center; background-color: darkslateblue; color: #a8aa94; margin-left: 0px; margin-right: 0px; min-width: 900px; >.footer a < color: #a8aa94; text-decoration: none; >.footer a:hover < color: #fff; text-decoration: none; >.footer p

Sign up or Log in to write an answer

  • Интерактивные уроки и курсы программирования и создания сайтов (дистанционное обучение) помогут вам в игровой форме изучить основы языков программирования веб-разработки и веб-программирования с нуля. Обучение онлайн 24/7.

Общие ссылки

  • Отзывы
  • Политика конфидециальности
  • Условия использования
  • Блог
  • Цена и оплата
  • Курсы и скринкасты
  • Сертификаты
  • Партнерская программа
  • Комьюнити

Наши курсы и скринкасты

  • HTML/CSS Advanced
  • Bootstrap 4
  • Vue JS
  • Linux, GIT and web-hosting
  • HTML and CSS
  • Modern Javascript
  • Javascript/jQuery
  • Codeigniter
  • Все курсы и скринкасты

Почему не работает a:hover на кнопке?

Спасибо за ответы, но я решил всё сам. Проблема оказалась до одури тривиальной — в одном месте не была поставлена точка с запятой, из-за чего код не обрабатывался.

SvyatoslavLP

Святослав Пупырев @SvyatoslavLP
Попробуй button-item:hover
Решения вопроса 1

danil_polyanskiy

Данил Полянский @danil_polyanskiy
Junior Front-End Developer

Вы в hover указали button-item a:hover, но button-item и a это одно и тоже, и именно из-за этого скрипт не работал. Надо было указать просто класс div’a button a:hover и всё будет работать отлично.

P.S. А также в строке background-color: #328888 вы забыли поставить «;» в конце 🙂

.button < margin-top: 100px; >.button-item < display: block; max-width: 260px; border: 3px solid #328888; border-radius: 5px; color: white; text-align: center; padding: 10px 20px; background-color: #215858; >.button a:hover

Не работает hover для div внутри родительского div, что делать?

Хочу, чтобы при наведении на главный div, менялся цвет для текста для всех элементов внутри этого div.
Но hover не работает — он меня цвет текста только для самого родителя. Я не понимаю, как это исправить.

 
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

.block1 < width: 500px;height: 500px; border: 3px solid black; >.block2 < width: 250px;height: 250px; border: 3px solid blue; font-size: 20px; color: chocolate; >.block1:hover
  • Вопрос задан более года назад
  • 301 просмотр

Комментировать
Решения вопроса 2
Алексей Уколов @alexey-m-ukolov Куратор тега CSS
Должно быть либо так:

.block1 < width: 500px; height: 500px; border: 3px solid black; color: chocolate; >.block2 < width: 250px; height: 250px; border: 3px solid blue; font-size: 20px; >.block1:hover
.block1 < width: 500px; height: 500px; border: 3px solid black; >.block2 < width: 250px; height: 250px; border: 3px solid blue; font-size: 20px; color: chocolate; >.block1:hover .block2

В вашем варианте указание цвета в дочернем элементе имеет приоритет над указанием цвета для родителя при наведении.

Ответ написан более года назад
Комментировать
Нравится 1 Комментировать

Anopeng

Веб-программист, учу фронт и бек

.block1:hover < color: green; >.block1:hover *

Ответ написан более года назад
Нравится 1 2 комментария
nomadicguy @nomadicguy Автор вопроса

Здравствуйте. А как сделать следующее: есть родительский div.block1, внутри него дочерний поменьше размером div.block2. У div.block2 цвет текста, допустим, будет синий. И вот я хочу, чтобы при наведении на родительский блок, цвет у дочернего менялся на желтый, но если я бы продолжал вести мышку и навелся на дочерний блок, он бы снова поменял цвет, например, на фиолетовый. Как такое сделать?

Я попробовал такую запись, но она не работает

.block1:hover * < color: yellow; >.block2:hover

Anopeng

nomadicguy, Почему не работает? Все прекрасно работает, цвет текста меняется. Может, у твоего экрана проблемы с цветопередачей, и просто не видно разницы? Разницы между синим и очень близким к нему фиолетовым.

.block1 < color: green; >.block2 < color: blue; >.block1:hover * < color: yellow; >.block2:hover

в style.css команда hover не работает

а почему должно что-то меняться при наведении? у вас одинаковые свойства прописаны для hover и без него. Пропишите для hover свои стили (напр. цвет, подчеркивание и т.д.) тогда увидите изменение при наведении.

3 years ago

Один ответ

JavaScript — полный курс с нуля до результата!

Полный курс Python для начинающих – с нуля до специалиста

Photoshop для начинающих Веб-дизайнеров

Adobe Illustrator с нуля – основы дизайна для начинающих

Программирование на Java с нуля

React JS для начинающих + Redux

Django 3 — Full Stack разработка веб сайтов на Python

WordPress – с нуля до Профи!

Основы HTML/CSS — верстка сайтов с нуля

WordPress – Быстрый старт!

Шаблонизатор Pug/jade — современный ускоритель для HTML

ВЕБ-разработчик — с нуля до результата!

Посадка верстки и создание тем на CMS WordPress

Настройка рекламы Яндекс Директ — продвижение сайтов

Настройка рекламы Google — продвижение сайтов

Настройка таргетированной рекламы и продвижение ВКонтакте

Настройка рекламы и продвижение Facebook+Instagram

МЕГАКУРС по рекламе: Яндекс Директ, Google Реклама, ВКонтакте, Facebook+Instagram

Полный курс Android + Java для начинающих

Kotlin — Быстрый старт!

Программирование на C# – от новичка до специалиста

Верстальщик сайтов — HTML, CSS, Bootstrap, JavaScript

SQL и PostgreSQL для начинающих

Создание административной панели на React JS + PHP

Практический JavaScript — продвинутый уровень

GIT. Управление версиями для разработчиков

Программирование на Java с нуля — Уровень 2 + 10 собеседований

Полный курс Python – продвинутый уровень + SQL

Figma для Веб дизайнера — с нуля до профессионала

React с нуля для начинающих + 3 проекта в портфолио!

Веб Дизайн в Figma. Основы Ui Ux дизайна на практике

Алгоритмы и структуры данных от А до Я

Adobe Illustrator с нуля – Уровень 2 – продвинутая практика

Android разработчик – профессиональный уровень (Kotlin)

Веб Дизайн в Figma 2022 Продвинутый уровень. Создание Ui Kit

Шаблоны проектирования на Python

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

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