Фон при наведении css

Фон при наведении css

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

Делается данная "штука" при помощи стилей CSS, т.е. придется добавить несколько строчек текста в файл стилей шаблона, а так же проявить свои дизайнерские способности. Я подскажу что именно добавить.

Обновлено 17.01.2019

Давайте сразу для наглядности пример, чтобы поняли о чем речь. Проведите мышкой по пунктам меню:

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

Вот так выглядит код данного блока:

В моем примере видим что эффект срабатывает на обычной ссылке. Вместо нее может быть контейнер

Чтобы сказать браузеру, что эффект нужно выполнять на конкретных ссылках, я взял их в отдельный

Практика

Теперь необходимо задать действие по наведению мышки. Как уже говорилось выше — делаем все при помощи стилей CSS (файл шаблона может называться style.css, css.css, core.css или еще как-то).

Данной строкой мы указали браузеру менять цвет заднего фона при наведении мышки на синий (#0078BF) и сказали что цвет шрифта должен стать белым (#fff). Сама "штука", позволяющая понять браузеру, что это нужно делать по наведению мышки — псевдокласс hover (о нем можно почитать ЗДЕСЬ ).

Чуть понятнее: мы указали что ссылка a должна находиться внутри контейнера с классом .catside . Далее мы добавили псевдокласс hover и оформили по правилам CSS.

Послесловие

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

Читайте также:  Видеокарта geforce 210 1gb ddr3

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

Опять же о показанном примере: в нем не учитываются параметры оформления блока (отступы, размер шрифта, картинка и прочее). Это все можно узнать из моих предыдущих статей на блоге, либо воспользоваться консолью разработчика F12 в вашем браузере (как им пользоваться смотрите видео на моем канале YOUTUBE ).

Опции темы
Отображение
  • Линейный вид
  • Комбинированный вид
  • Древовидный вид

Изменение background-color при наведении курсора

Как изменить background-color при наведении курсора??
Я знаю, что в ссылках просто прописывается

но это в ссылках, а мне надо, чтобы background-color div-a изменялся!

на форуме есть много примеров меню где это делается

Я предполагал, что такие темы уже есть, НО я уже " полчаса " ищу и безрезультатно!

А с таблицей?

Пытаюсь это применить к ячейке, что бы картинка менялась — Не получается 🙁

Как сделать что бы при наведении на ячейку картинка background`a менялась.

Levin, лучше разместите в ячейке ссылку A для которой в стилях задайте
display:block

а фоно меняйте тоже в стилях посредством
a:hover

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

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

но если же, вы всё-таки прицепились к ячейкам, то можно использовать такой код

в котором вы задаете фоновую картинку, и только меняете ее позицию со смещением

Читайте также:  Как пожаловаться на покупателя на авито

Да, верно 🙂
Это натолкнуло меня на другую мысль.
сделал списком, но честно говоря частично спер, поэтому принцип не совсем понял.
Буду очень признателен если прокомментируете:
Файл CSS

#MainMenu
<
width:210%;
height:112px;
background:#FFF;
border:0;
margin:0;
>

list-style:none;
float:left;
margin:0;
padding:0;
>
#tab li
<

display:inline;
float:left;
margin:0;
padding:0;
>
#tab a
<
background:#000 url(картинка в покое);
text-decoration:none;
border:0;
display:block;
float:left;
margin:0;
padding:0;
>
#tab a span
<
display:block;
font-family:Georgia, serif;
font-size:12px;
color:#7f7f7f;
font-weight:700;
width:95px;
line-height:111px;
padding:0 0px;
>
#tab a:hover,#tab li.item_active a
<
background:url(картинка при наведении);
>
#tab a:hover span,#tab li.item_active a span
<
color:#000;
font-weight:700;
font-style:normal;
text-decoration:none;
>

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

В таблице стилей у ссылки есть специальный псевдокласс :hover . Он отвечает за стиль при наведении. Как только курсор будет убран с ссылки, она вернется в исходное состояние.

Примеры с изменением вида ссылки при наведении

Пример 1. Как изменить цвет и сделать подчеркивание при наведении

Преобразуется на странице в следующее:

Пример 2. Как изменить фон ссылки при наведении

Преобразуется на странице в следующее:

Пример 3. Как поменять курсор при наведении на ссылку

По умолчанию у ссылок курсор при наведении имеет значение cursor : pointer . В следующем примере мы изменим его на другой.

Преобразуется на странице в следующее:

Пример 4. Сглаженное изменение стилей ссылки

С помощью свойства transition мы сгладим скорость изменения фона и цвета ссылки.

Ссылка на основную публикацию
Учимся рисовать в paint
Серия видео уроков «Создание компьютерного рисунка в программе Paint» МОУ «Межборская средняя общеобразовательная школа» (Уроки предназначены для детей 9-12 лет,...
Умный браслет с функцией измерения давления
Вы посвящаете свою жизнь спорту или просто стараетесь всеми возможными способами следить за своим здоровьем? Придерживаетесь того, что во время...
Умный выключатель zigbee aqara
Протокол передачи данных в домашних системах автоматизации. Реле Xiaomi Aqara Xiaomi Aqara wireless relay Систему "Умного дома" сложно представить без...
Учиться без троек сканворд
Музыкант, играющий на барабанах, тарелках Передовой работник производства (ударник) Часть затвора стрелкового оружия (ударник) "Барабанщик" коммунистического труда (устар.) (ударник) "Барабанщик"...
Adblock detector