Как изменить текст при наведении css

Как изменить вид ссылки при наведении на нее курсора мыши?

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

Решение

Псевдокласс :hover , который добавляется к селектору A , определяет состояние ссылки при наведённом на неё курсоре мыши. В стилях вначале указывается селектор A , потом :hover (пример 1).

Пример 1. Изменение вида ссылки

HTML5 CSS 2.1 IE Cr Op Sa Fx

В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда на неё наводится указатель (рис. 1). Заметьте, что псевдокласс :hover в коде идёт после :visited . Это имеет значение, иначе посещённые ссылки в данном случае не будут изменять свой цвет.

Рис. 1. Вид ссылки при наведении на неё курсора мыши

Аналогично можно изменить и цвет фона под ссылкой при её наведении, добавив свойство background к селектору A:hover , как показано в примере 2.

Пример 2. Изменение цвета фона ссылки

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding .

Как проще заменить текст ссылки при наведении?

Какими еще способами посоветуете воспользоваться для корректного отображения заменяемого текста? В примере выше — он моргает как бешенная пота*куха. Заранее спасибо!

Всё гораздо проще:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css текст hover display или задайте свой вопрос.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Плавная смена текста при наведении мыши

Нужно сделать плавное появление второго текста при наведении.

У меня знания на начальном уровне поэтому прошу помощи. Самостоятельно не получилось сделать.

Смена изображения при наведении мыши
Делаю сайт "Интерактивное пособие по физическому развитию тела" не вижу ошибку в коде. <html>.

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

Смена цвета картинки (SVG) и ссылки (буквы) при наведении курсора мыши
Здравствуйте, я никогда до этого не работал с svg. У меня есть ссылка <a.

Добавлено через 6 минут
Не могу блин найти, буквально пару дней назад читал про этот метод, наверно на sololearn.

Появление текста при наведении мыши
Пытаюсь сделать миниатюры для bootstrap карусели. При наведении мыши картинка должна затемнится и.

Смена цвета текста при наведении курсором
Привет. На форуме нашел не одному подобную тему ,но они мне не помогли. Есть САЙТ ( не реклама ).

Изменение цвета и текста при наведении курсора мыши
Добрый вечер. Вот такой вот вопрос: "Как менять одновременно цвет и текст при наведении курсора.

При наведении курсора мыши на блок произвести исчезновение текста
как сделать? Произвольный текст. При наведении курсора мыши на этот текст он должен пропадать.

Меняем цвет элемента по наведению мышки

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

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

Обновлено 17.01.2019

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

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

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

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

Практика

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

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

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

Послесловие

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

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

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

Похожие публикации:

Как разместить элементы списка вертикально css
Как расположить картинку справа css
Как расположить элементы вертикально css
Как растянуть картинку на весь экран в css

Эффекты при наведении на картинку CSS

Подборка Hover эффектов при наведении на картинку CSS. Здесь вы найдете эффекты для галереи, эффекты с появлением текста или иконок, рамки и многие другие интересные эффекты для сайта.

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

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

Пример

HTML

CSS

 .beauty-rotate < width: 300px; height: 300px; border: 4px double #bd6c46; /* Рамка */ overflow: hidden; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; >.beauty-rotate:hover

Разворот картинки при наведении CSS

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

Пример

HTML

CSS

 /* Блок картинки */ .rotate-block < width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; >/* Изображение */ .change-img < width: 300px; height: 300px; position: relative; perspective: 1000px; border: 1px solid #d68360; /* Рамка */ >.change-img:hover .front-side-img < transform: rotateY(180deg); >.change-img:hover .back-side-img < transform: rotateY(360deg); >/* Стороны изображения */ .front-side-img, .back-side-img < position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transition: 1s; back-side-imgface-visibility: hidden; >.front-side-img img < max-width: 100%; min-width: 100%; height: auto; >.back-side-img img < max-width: 100%; min-width: 100%; height: auto; transform: scaleX(-1);/* Отражаем изображение по горизонтали */ >.back-side-img

Поворот картинки при наведении CSS

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

Пример

HTML

CSS

 img.small-rotate < -webkit-transition: all 1s ease; transition: all 1s ease; >img.small-rotate:hover < -webkit-transform: rotate(15deg); /* Градусы поворота можно изменить по необходимости */ transform: rotate(15deg); /* Градусы поворота можно изменить по необходимости */ >

Вращение картинки при наведении CSS

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

Пример

HTML

CSS

 img.rotate-img < border-radius: 50%; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; >img.rotate-img:hover < -webkit-transform: rotate(360deg); /* Градусы поворота можно изменить по необходимости */ transform: rotate(360deg); /* Градусы поворота можно изменить по необходимости */ >

Рамка внутри блока или картинки при наведении

Чтобы рамка появлялась внутри блока или картинки можно использовать свойство outline-offset. С помощью него можно задать расстояние от края элемента до рамки. Отрицательное значение отображает рамку внутри элемента, положительное — вокруг элемента.

Пример

HTML

CSS

 img:hover < outline: 2px dashed #3d1f15; /* Ширина, вид и цвет рамки */ outline-offset: -10px; /* Выводим рамку внутри элемента */ >

Рамка к изображению при наведении

Такая рамка может пригодиться в галерее, а так же если нужно выделить то или иное изображение при наведении. Рамка вокруг изображений делается с помощью свойства border, которое добавляется к селектору img. Чтобы рамка появлялась только при наведении курсора мыши на картинку, следует воспользоваться псевдоклассом :hover.

Пример

HTML

CSS

 img:hover < border: 3px solid #413f3f; /* Ширина, вид и цвет рамки */ >

Эффект при наведении на картинку с текстом CSS

Эффекты при наведении на картинку с появлением и подчеркиванием заголовка. Для удобства копирования в каждую вкладку CSS добавлены общие стили. Эти эффекты можно использовать для галереи и для карточек товаров.

Пример

HTML

       Lorem ipsum
 Lorem ipsum dolor sit amet, consectetur adipiscing elit
 
 
 
      Lorem ipsum
 Lorem ipsum dolor sit amet, consectetur adipiscing elit

CSS 1

 /* Общие стили */ *, *:after, *:before < border-box; box-sizing: border-box; >.clearfix:before, .clearfix:after < content: ''; display: table; >.clearfix:after < clear: both; >.hover-text-one < overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; >.hover-text-one figure < position: relative; z-index: 1; display: inline-block; overflow: hidden; background: #527c82; text-align: center; cursor: pointer; >.hover-text-one figure img < position: relative; display: block; min-height: 100%; opacity: 0.8; >.hover-text-one figure figcaption < padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; >.hover-text-one figure figcaption::before, .hover-text-one figure figcaption::after < pointer-events: none; >.hover-text-one figure figcaption < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.hover-text-one figure h3 < word-spacing: -0.15em; font-weight: 300; >.hover-text-one figure h3 span < font-weight: 800; >.hover-text-one figure h3, .hover-text-one figure p < margin: 0; >.hover-text-one figure p < letter-spacing: 1px; font-size: 68.5%; >/* Эффект при наведении */ figure.effect-text-three < background: #527c82; >figure.effect-text-three img < width: -webkit-calc(100% + 20px); width: calc(100% + 20px); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transform: scale(1.1); -webkit-backface-visibility: hidden; backface-visibility: hidden; >figure.effect-text-three:hover img < opacity: 0.4; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >figure.effect-text-three figcaption < text-align: left; >figure.effect-text-three h3 < position: relative; overflow: hidden; padding: 0.5em 0; >figure.effect-text-three h3::after < position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #fff; content: ''; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); >figure.effect-text-three:hover h3::after < -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >figure.effect-text-three p < padding: 1em 0; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); >figure.effect-text-three:hover p

CSS 2

 /* Общие стили */ *, *:after, *:before < border-box; box-sizing: border-box; >.clearfix:before, .clearfix:after < content: ''; display: table; >.clearfix:after < clear: both; >.hover-text-one < overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; >.hover-text-one figure < position: relative; z-index: 1; display: inline-block; overflow: hidden; background: #527c82; text-align: center; cursor: pointer; >.hover-text-one figure img < position: relative; display: block; min-height: 100%; opacity: 0.8; >.hover-text-one figure figcaption < padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; >.hover-text-one figure figcaption::before, .hover-text-one figure figcaption::after < pointer-events: none; >.hover-text-one figure figcaption < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.hover-text-one figure h3 < word-spacing: -0.15em; font-weight: 300; >.hover-text-one figure h3 span < font-weight: 800; >.hover-text-one figure h3, .hover-text-one figure p < margin: 0; >.hover-text-one figure p < letter-spacing: 1px; font-size: 68.5%; >/* Эффект при наведении */ figure.effect-text-four figcaption < text-align: right; >figure.effect-text-four h3, figure.effect-text-four p < position: absolute; right: 30px; left: 30px; padding: 10px 0; >figure.effect-text-four p < bottom: 30px; line-height: 1.5; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); >figure.effect-text-four h3 < top: 30px; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0); >figure.effect-text-four:hover h3 < -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >figure.effect-text-four h3::after < position: absolute; top: 100%; left: 0; width: 100%; height: 4px; background: #fff; content: ''; -webkit-transform: translate3d(0,40px,0); transform: translate3d(0,40px,0); >figure.effect-text-four h3::after, figure.effect-text-four p < opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; >figure.effect-text-four:hover h3::after, figure.effect-text-four:hover p

Эффекты при наведении на картинку с текстом CSS

Два эффекта при наведении на картинку с появлением текста. Для удобства копирования в каждую вкладку CSS добавлены общие стили. Эти эффекты можно использовать для галереи и для карточек товаров.

Читать:

Как подключить принтер canon к телефону

Пример

HTML

       Lorem ipsum
 Lorem ipsum dolor sit amet, consectetur adipiscing elit
 
 
 
      Lorem ipsum
 Lorem ipsum dolor sit amet, consectetur adipiscing elit

CSS 1

 /* Общие стили */ *, *:after, *:before < border-box; box-sizing: border-box; >.clearfix:before, .clearfix:after < content: ''; display: table; >.clearfix:after < clear: both; >.hover-text-one < overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; >.hover-text-one figure < position: relative; z-index: 1; display: inline-block; overflow: hidden; background: #527c82; text-align: center; cursor: pointer; >.hover-text-one figure img < position: relative; display: block; min-height: 100%; opacity: 0.8; >.hover-text-one figure figcaption < padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; >.hover-text-one figure figcaption::before, .hover-text-one figure figcaption::after < pointer-events: none; >.hover-text-one figure figcaption < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.hover-text-one figure h3 < word-spacing: -0.15em; font-weight: 300; >.hover-text-one figure h3 span < font-weight: 800; >.hover-text-one figure h3, .hover-text-one figure p < margin: 0; >.hover-text-one figure p < letter-spacing: 1px; font-size: 68.5%; >/* Эффект при наведении */ figure.effect-text-two figcaption::before < position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); content: ''; opacity: 0; -webkit-transform: translate3d(0,50%,0); transform: translate3d(0,50%,0); >figure.effect-text-two h3 < position: absolute; top: 50%; left: 0; width: 100%; color: #f66d52 !important; -webkit-transition: -webkit-transform 0.35s, color 0.35s; transition: transform 0.35s, color 0.35s; -webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); >figure.effect-text-two figcaption::before, figure.effect-text-two p < -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; >figure.effect-text-two p < position: absolute; bottom: 0; left: 0; padding: 2em; width: 100%; opacity: 0; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); >figure.effect-text-two:hover h3 < color: #fff; -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0); transform: translate3d(0,-50%,0) translate3d(0,-40px,0); >figure.effect-text-two:hover figcaption::before , figure.effect-text-two:hover p

CSS 2

 /* Общие стили */ *, *:after, *:before < border-box; box-sizing: border-box; >.clearfix:before, .clearfix:after < content: ''; display: table; >.clearfix:after < clear: both; >.hover-text-one < overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; >.hover-text-one figure < position: relative; z-index: 1; display: inline-block; overflow: hidden; background: #527c82; text-align: center; cursor: pointer; >.hover-text-one figure img < position: relative; display: block; min-height: 100%; opacity: 0.8; >.hover-text-one figure figcaption < padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; >.hover-text-one figure figcaption::before, .hover-text-one figure figcaption::after < pointer-events: none; >.hover-text-one figure figcaption < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.hover-text-one figure h3 < word-spacing: -0.15em; font-weight: 300; >.hover-text-one figure h3 span < font-weight: 800; >.hover-text-one figure h3, .hover-text-one figure p < margin: 0; >.hover-text-one figure p < letter-spacing: 1px; font-size: 68.5%; >/* Эффект при наведении */ figure.effect-text-one img < width: -webkit-calc(100% + 50px); width: calc(100% + 100px); opacity: 0.7; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transform: scale(1.2); >figure.effect-text-one figcaption < top: auto; bottom: 0; height: 50%; text-align: left; >figure.effect-text-one h3, figure.effect-text-one p < -webkit-transform: translate3d(0,40px,0); transform: translate3d(0,40px,0); >figure.effect-text-one h3 < color: #f66d52 !important; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; >figure.effect-text-one p < background: rgba(0,0,0,0.6); color: #fff; padding: 10px; opacity: 0; -webkit-transition: opacity 0.2s, -webkit-transform 0.35s; transition: opacity 0.2s, transform 0.35s; >figure.effect-text-one:hover img, figure.effect-text-one:hover p < opacity: 1; >figure.effect-text-one:hover img, figure.effect-text-one:hover h3, figure.effect-text-one:hover p < -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >figure.effect-text-one:hover p

Как изменить цвет фона внутри дочернего элемента div при наведении курсора?

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

.parent < background-color: #cde; width: 100%; height: 100px; position: relative; overflow:hidden; >.parent:hover < background-color: black; >.child < position: absolute; left: 50%; top: 50%; padding: 10px; background-color: #ff0000; >.child:hover

  Click

Отслеживать
ответ дан 18 июн 2021 в 19:29
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака

Саша а кроме того что на кнопке меняется фон, ещё что то должно произойти ? или просто на кнопке меняется фон ?

19 июн 2021 в 0:50
@MaximLensky Судя по оригинальному вопросу на EnSO, меняется только фон
19 июн 2021 в 6:58
фон кнопки .
19 июн 2021 в 6:59
@MaximLensky да
19 июн 2021 в 7:00
а что не обычного в этом hover ? я просто понять хочу в чём уникальность
19 июн 2021 в 7:01

html
css
вёрстка
hover

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Ссылки CSS/HTML

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

Как изменить цвет ссылки при наведении CSS

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

Пример

HTML

CSS

 .change-color-link < color: #f66d52; /* Цвет ссылки */ font-size: 2em; font-weight: bold; padding: 20px 0px; line-height: 1; text-decoration: none; -webkit-transition: all 1s ease; transition: all 1s ease; /* Время изменения цвета */ >.change-color-link:hover < color: #ffa000; /* Меняем цвет ссылки */ >

Как сделать заголовок в виде ссылки

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

Пример

Lorem Ipsum

HTML

 Lorem Ipsum
 Lorem Ipsum

CSS

 a.link-page < color: #f66d52; /* Цвет ссылки */ >

Как добавить рисунок к внешней ссылке

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

Пример

HTML

 Lorem Ipsum Lorem Ipsum

CSS

 /* Картинка в начале ссылки */ a.external-link-start < background: url(image.png) no-repeat 0 50%; /* Параметры картинки */ padding-left: 25px; /* Расстояние слева */ >/* Картинка в конце ссылки */ a.external-link-end < background: url(image.png) no-repeat 100% 50%; /* Параметры картинки */ padding-right: 25px; /* Расстояние справа */ >

Как добавить пунктирное подчёркивание к ссылке

Чтобы добавить пунктирное подчёркивание к ссылке, следует добавить нижнюю границу к ней с помощью свойства border-bottom. Так как пунктирное подчёркивание часто используется для оформления ссылок, щелчок по которым не открывает ссылку, а выполняет некоторое действие в текущем документе, то следует задать таким ссылкам определенный класс.