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

Инструкции — Советы по CSS — Изменение вида ссылки при наведении на нее указателя мыши с помощью CSS

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

Решение
Создать такой привлекательный эффект гораздо проще с помощью CSS, а не графики. Для этого используется селектор псевдокласса :hover, как и при задании стиля для ссылок при наведении на них указателя мыши.

Вернемся к рассмотренному ранее примеру навигационного меню и добавим в таблицу стилей следующее правило:chapter04/listnav2.css (фрагмент)#navigation li a:hover {

background-color: #711515;

color: #FFFFFF;}

На рис. 4.4 показан вид меню при наведении курсора на первый пункт:

Рис. 4.4. Эффект смены визуального оформления пунктов меню, реализованный средствами CSS (DEMO)

Обсуждение
Используемый для создания такого эффекта CSS-код предельно прост. Механизм создания разного визуального оформления ссылок одинаков при работе со ссылками различной сложности.

Обратите внимание

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

Примечание
Мышка тут, мышка там… При условии просмотра сайта в современных браузерах, включая Internet Explorer 7, селектор псевдокласса :hover можно использовать по отношению к любому элементу, однако версии Internet Explorer 6 и ниже корректно обрабатывают его только для ссылок.

В ранних версиях Internet Explorer для перехода по ссылке необходимо было щелкнуть по ее тексту, поскольку ссылка не заполняла весь контейнер (в данном случае – элемент li) целиком. Это означает, что для перехода к определенному разделу пользователь должен щелкнуть по тексту: щелчок по красному фоновому цвету не сработает.

Данную проблему можно решить путем увеличения ширины ссылки средствами CSS (однако такой способ приемлем только для Internet Explorer 6 и ниже).

Здесь представлено необходимое для этого правило стиля:

* html #navigation li a { width: 100%; }

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

Источник: http://xoops.ws/modules/instruction/page.php?id=758

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

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

Конечно менять в корне я его не стал, а вот обновить некоторые элементы и добавить нового решил окончательно и бесповоротно.

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

И так решения по обновлению стиля сайта было принято, осталось только придумать, что конкретно я хочу изменить? Долго думать о том, что и как обновить на сайте мне не пришлось,  как то раз просматривая Гугл + я увидел очередную статью Виталия Бургамистрова (его сайт http://mojwp.ru/). В этой статье он рассказал как можно менять цвета элементов  при наведении мышки на них. Решение которое он предложил меня устроило, все было просто и понятно вот часть кода:

.licat:hover {background:#51AE3A;}
.licat:hover a {color:#fff;}

Таким образом при наведении курсора мышки на ссылку меняется цвет текста и цвет заднего фона. Это дополнение необходимо добавить в основной файл стилей вашего шаблона или темы (в основном это файл style.css но может иметь и другие названия). Лучше этот код добавить после основного стиля прописанного для ссылок. Но для корректной работы мне понадобилось переместить одну букву в нижней строк.

Вот как было Вот как стало
.licat:hover a {color:#fff;} .licat a:hover {color:#fff;}

Пример кода:

a{color: #f15000; text-decoration: none;}
a:hover{text-decoration: none; color:#b80000;}
.licat:hover {background:#51AE3A;}
.licat a:hover {color:#fff;}

Затем для вывода ссылок мы используем html код в виде:

Как создать надежный пароль?

Вот пример его работы: Как создать надежный пароль?

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

Вот пример того, что у вас может получиться:

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

Для того, что бы это все работало нужно в файл стиля ваше темы (шаблона) прописать примерно такой код:

.linky {
border:1px solid #c4c4c4;
font-size:14px;
font-family: georgia, times, verdana;
border-radius:3px;
padding: 0 5px 2px 5px; color:#f15000; background:#EFEFEF;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
}
.linky:hover {color:#fff !important; background:#51AE3A;}

Для вывода таких ссылок нужно использовать следующий код:

Wordress исполнилось 10 лет

Где обязательно нужно указать класс для вашей ссылке, в нашем случае это class= «linky».

Важно

Для корректной работы кода смены цвета ссылки и заднего фона с задержкой, возможно Вам придется его немного адаптировать под свою тему (шаблон). Но в целом это не сложно и все у Вас получиться!

Источник: http://www.sevelweb.ru/kak-izmenit-tsvet-ssyilki-ili-elementa-pri-navedenii-kursora-2/

Изменяем курсор мыши с помощью правила CSS Cursor

Здравствуйте, уважаемые читатели блога webcodius.ru. Сегодня мы рассмотрим небольшую тему как изменить курсор мыши при помощи css. В операционной системе вашего компьютера предусмотрено несколько возможных вариантов курсора мыши в зависимости от совершаемых действий. Курсор может приобретать вид различных стрелок, руки, перекрестья, песочных часов и т.п.

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

Курсор мыши можно поменять с помощью правила css cursor, которое позволяет установить форму курсора мыши при наведении его на данный элемент веб-страницы. Этот атрибут можно применять к любому элементу веб страницы, будь это строчный или блочный элемент.

Если посмотреть спецификацию css, то вы заметите, что возможных значений у атрибута cursor довольно много:

cursor: auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|inherit

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

Все основные возможные значения приведены в таблице ниже.

Столбец «Значение» содержит значения параметра cursor, во втором столбце «Вид» отображение курсора на моем компьютере, в третьем пример использования параметра с данным значением.

Совет

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

ЗначениеВидПример
default P {cursor: default}
none P {cursor: none}
context-menu P {cursor: context-menu}
help P {cursor: help}
pointer P {cursor: pointer}
progress P {cursor: progress}
wait P {cursor: wait}
cell P {cursor: cell}
crosshair P {cursor: crosshair}
text P {cursor: text}
vertical-text P {cursor: vertical-text}
alias P {cursor: alias}
copy P {cursor: copy}
move P {cursor: move}
no-drop P {cursor: no-drop}
not-allowed P {cursor: not-allowed}
e-resize P {cursor: e-resize}
n-resize P {cursor: n-resize}
ne-resize P {cursor: ne-resize}
nw-resize P {cursor: nw-resize}
s-resize P {cursor: s-resize}
se-resize P {cursor: se-resize}
sw-resize P {cursor: sw-resize}
w-resize P {cursor: w-resize}
ew-resize P {cursor: ew-resize}
ns-resize P {cursor: ns-resize}
nesw-resize P {cursor: nesw-resize}
nwse-resize P {cursor: nwse-resize}
col-resize P {cursor: col-resize}
row-resize P {cursor: row-resize}
all-scroll P {cursor: all-scroll}

Некоторые значения для css правила cursor перечисленные выше могут не работать в различных браузерах. Особенно часто проблемы возникают с Оперой, иногда что то может не работать в браузерах Mozila Firefox и Chrome. Установленный по умолчанию в операционной системе Windows браузер  Internet Explorer поддерживает все значения.

 С помощью правила cursor также можно задать свой собственный курсор, задав путь к соответствующей картинке. Расширение файла картинки с курсом обычно бывает .cur.

Кроме формата CUR Internet Explorer в качестве формата файла курсора поддерживает еще и формат ANI.

А Firefox, Chrome и Safari кроме CUR поддерживают еще форматы PNG, GIF и JPG.

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

cursor: url ('адрес картинки 1'), url ('адрес картинки 2'), …

,<\p>

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

Обратите внимание

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

текст абзаца

Вообще CSS правило Cursor веб-мастера применяю довольно редко, чтобы не вводить пользователя в заблуждение. Прежде чем переделать вид курсора, определите, будет ли это изменение к месту. Ведь, допустим, что может подумать пользователь, если вместо традиционной руки, появляющейся при наведении на ссылку, возникнет что-то другое.

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

(1

Источник: http://webcodius.ru/spravochnik-css/izmenyaem-kursor-myshi-s-pomoshhyu-pravila-css-cursor.html

Меняем цвет элемента по наведению мышки. Простой пример, простой CSS

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

Читайте также:  Насколько безопасно хранить деньги в webmoney

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

Обновлено 17.01.2019

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

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

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

Биржи ссылокВсе плагины WordPressВсякие полезностиУкрашаем сайтХаки WordPress

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

  • и прочие подходящие теги.

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

    Практика

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

    .catside a:hover {background: #0078BF; color: #fff;}

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

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

    Послесловие

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

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

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

    Давай, оцени статью!

  • Источник: https://mojwp.ru/css-hover.html

    Как изменить стандартный курсор на сайте?

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

    Делаем нестандартный курсор на сайте

    Если вы хотите изменить курсор на всем сайте, то в стили вашего сайта добавьте следующее:

    body { cursor: url('/пусть к файлу/sword.cur'), auto; }

    В коде вам нужно изменить адрес до вашего курсора. Сам курсор может быть как обычное изображение (расширений *.png, *.gif, *.jpg, *.ico) или же иметь специальное расширение курсоров *.cur

    Важно

    Если же вы хотите изменить курсор, например, только при наведении на ссылку или нужный вам объект, то вставьте:

    .link:hover { cursor: url('/путь к файлу/sword.cur'), auto; }

    Здесь .link – это класс у ссылки, и при наведении на нее будет появляться наш курсор.

    Стандартные свойства CSS для изменения курсора

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

    cursor: auto; cursor: default; cursor: none;
    cursor: context-menu; cursor: help; cursor: pointer;
    cursor: progress; cursor: wait; cursor: cell;
    cursor: crosshair; cursor: text; cursor: vertical-text;
    cursor: alias; cursor: copy; cursor: move;
    cursor: no-drop; cursor: not-allowed; cursor: all-scroll;
    cursor: n-resize; cursor: e-resize; cursor: s-resize;
    cursor: w-resize; cursor: col-resize; cursor: row-resize;
    cursor: nw-resize; cursor: se-resize; cursor: sw-resize;
    cursor: ew-resize; cursor: nesw-resize; cursor: nwse-resize;
    cursor: zoom-in; cursor: zoom-out; cursor: grabbing;
    cursor: grab; cursor: ns-resize; cursor: ne-resize;

    Для применения этих свойств вы так же копируете нужное вам и применяете к объектам на вашем сайте, например:

    .link:hover { cursor: w-resize; }

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

    Источник: https://www.pandoge.com/stati_i_sovety/kak-izmenit-standartnyy-kursor-na-sayte

    Плавное подчёркивание ссылки при наведении

    Представляю коротенькие фрагменты кода(сниппет) CSS, для реализации выделения анкоров ссылок с плавным подчёркиванием при наведении.
    Зачем нужно выделять ссылки из общего месива текста, это и ежу понятно. Существует великое многообразие способов и видов оформления ссылок, всё ограничивается лишь фантазией мастера.

    С помощью псевдо-класса:hover и магии CSS3, можно навесить на стандартные, скучно-оформленные синюшные ссылки, практически любой эффект. Решения, о которых пойдёт речь сегодня, не представляют из себя, что-нибудь особо потрясающее или необычное.

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

      Детально распишу только код CSS, так как на стороне Html менять и добавлять что-либо нет необходимости.

    CSS

    Во-первых, с помощью свойства line-height: установим межстрочный интервал в зависимости от базовой линии шрифта, у вас значение может быть другим. Сделаем ссылку блочно-строчной, встроенной в структуру текста, задав ей свойство display со значением inline-block. Избавимся от стандартного подчёркивания прописав text-decoration:none; и зальём ссылку нужным нам цветом.
     

    a { line-height: 1; display: inline-block; color:#ffeb3b;
    text-decoration:none; cursor: pointer;
    }

    a { line-height: 1; display: inline-block; color:#ffeb3b; text-decoration:none; cursor: pointer; }

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

    Ширину линии изначально выставим с нулевым значением width: 0%;, высоту определим в 2px.

    Цвет линии может быть любым, в примере не стал особо фантазировать и выставил в соответствии цвета текста ссылки.
     

    a:after { display: block; content: «»; height: 2px; width: 0%; background-color: #ffeb3b;
    transition: width .3s ease-in-out;
    }

    a:after { display: block; content: «»; height: 2px; width: 0%; background-color: #ffeb3b; transition: width .3s ease-in-out; }

    Остаётся дело за малым, добавить нашей ссылке немного движухи. Для этого используем парочку псевдоклассов :hover и :focus. Первый будет определяет стиль ссылки при наведении, второй сработает когда на ссылке «плотно» установится курсор.

    Здесь мы изменим значение ширины, определим его в 100%.

    Теперь, при наведении или фокусе на ссылке, стилизованная линия подчеркивания явит себя взору пользователя, плавно с еле-заметной задержкой, время которой, мы предусмотрительно определили ранее в свойстве transition:.
     

    a:hover:after,
    a:focus:after { width: 100%;
    }

    a:hover:after, a:focus:after { width: 100%; }

    В итоге мы получаем следующую картину:

    Наведите курсор на образец, чтобы проверить.

    Весь код в сборе будет выглядеть так:
     

    a { display: inline-block; color:#ffeb3b; line-height: 1; text-decoration:none; cursor: pointer;
    }
    a:after { background-color: #ffeb3b; display: block; content: «»; height: 2px; width: 0%; -webkit-transition: width .3s ease-in-out; -moz—transition: width .3s ease-in-out; transition: width .3s ease-in-out;
    }
    a:hover:after,
    a:focus:after { width: 100%;
    }

    a { display: inline-block; color:#ffeb3b; line-height: 1; text-decoration:none; cursor: pointer; } a:after { background-color: #ffeb3b; display: block; content: «»; height: 2px; width: 0%; -webkit-transition: width .3s ease-in-out; -moz—transition: width .3s ease-in-out; transition: width .3s ease-in-out; } a:hover:after, a:focus:after { width: 100%; }

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

    Обновление и дополнения от 22.10.2017

    В комментариях проскакивали вопросы о том, как сделать подчёркивание с центра текста ссылки, с плавным растягиванием в стороны. Если есть спрос, значит будет и предложение ))).

    Всё довольно просто, необходимо лишь добавить пару-тройку новых свойств, то есть, для основного элемента a определить позиционирование относительным position:relative;, а для псевдоэлемента a:after абсолютным position:absolute; с расстоянием от левого края родительского элемента left:50%;, а так же с помощью свойства transform определить сдвиг элемента по горизонтали на указанное значение transform:translateX(-50%).

    На выходе мы получаем вот такой результат:

    Наведите курсор на образец, чтобы проверить.

    В сборе весь код css, для плавного подчёркивания ссылки с центра, должен выглядеть примерно так:

    a { display: inline-block; color:#ffeb3b; line-height: 1; text-decoration:none; cursor: pointer; position:relative;
    }
    a:after { background-color: #ffeb3b; display: block; content: «»; height: 2px; width: 0%; left:50%; position:absolute; -webkit-transition: width .3s ease-in-out; -moz—transition: width .3s ease-in-out; transition: width .3s ease-in-out; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%);
    }
    a:hover:after,
    a:focus:after { width: 100%;
    }

    a { display: inline-block; color:#ffeb3b; line-height: 1; text-decoration:none; cursor: pointer; position:relative; } a:after { background-color: #ffeb3b; display: block; content: «»; height: 2px; width: 0%; left:50%; position:absolute; -webkit-transition: width .3s ease-in-out; -moz—transition: width .3s ease-in-out; transition: width .3s ease-in-out; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%); } a:hover:after, a:focus:after { width: 100%; }

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

    Источник: http://dbmast.ru/plavnoe-podchyorkivanie-ssylki-pri-navedenii

    Плавное подчеркивание ссылки при наведении

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

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

    Как создать код для эффекта плавного подчеркивания ссылки при наведении

    Сразу приведу  весь код полностью, который позволяет применить эффект для всех ссылок:

        background-color: #225384;    transition: width 0.4s ease-in-out; /*время появления линии в секундах*/
    Читайте также:  Как изменить размер картинки в html

    Теперь давайте рассмотрим, что здесь и зачем подробней:

    Как вы знаете ссылка создается в виде блока с классом «link», внутри которого помещена собственно ссылка.

    Ваша ссылка 1Ваша ссылка 2

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

    text-decoration:none; /*Удаляем подчёркивание ссылки если оно предусмотрено темой вашего блога*/display: inline-block; /*Делаем блочный элемент для ссылки*/line-height: 1; /*Значение для высоты строки (можно указать в пикселях)*/color:#2F73B6;/*Цвет ссылки*/

    Далее, мы делаем плавное появление линии подчеркивания под ссылкой, добавлением элемента «after»:

        display: block; /*создаем блок для элемента*/    content: «»; /*блок без текста поэтому кавычки оставляем пустыми*/    height: 3px; /*высота линии*/    width: 0%; /*ширина линии*/    background-color: #225384; /*цвет фона линии*/   transition: width 0.4s ease-in-out; /*время появления линии в секундах*/}

    Затем прописываем псевдоэлементы «:hover»:  и «:focus»: для задания 100% ширины элемента «after» Это позволяет плавно изменять ширину линии подчеркивания от 0% до полной ширины ссылки.

    Если необходимо, чтобы при наведении ссылка меняла цвет, можно дописать следующий код:

    .link a:hover   /*Чтобы эффект смены цвета применялся ко всем ссылкам, вместо «link a» , пишите просто «a»  */

    Как вставить код на сайт

    Данный код вставляется в самый конец  файла  style.css вашего сайта. Для этого заходите в панель управления сайтом «Внешний вид» (1) =>«Редактор» (2) =>«style.css» (3)

    Эффект плавного подчеркивания ссылки при наведении полностью готов для вашего ресурса. На этом пожалуй все, применяйте данную функцию для улучшения внешнего вида и поведенческих факторов вашего сайта. До встречи!

    Источник: https://sergeyneznamov.ru/plavnoe-podcherkivanie-ssyilki-pri-navedenii/

    Как сделать красивые эффекты для ссылок на CSS3, а именно плавное изменение цвета при наведении и плавный сдвиг вправо

    Приветствую Вас, дорогие читатели блога beloweb.ru. В этот день я хочу рассказать Вам, как сделать пару красивых но очень простых эффектов для ссылок на сайте. А именно плавное изменение цвета при наведении и плавный сдвиг текста ссылки.  В общем красиво получается. Тем более я часто вижу эти эффекты на разных сайтах.

    Почему этот способ простой? Потому что он делается только с помощью CSS. Никаких скриптов только стили.

    В общем, дорогие друзья, давайте приступать.

    Посмотреть пример

    Плавное изменение цвета при наведении

    Для всех ссылок

    Друзья, для того чтобы этот эффект работал на всех ссылках на сайте, тогда просто нужно в Вашем CSS файле к классу а(ссылки) добавить тег transition. Желательно с префиксами для разных браузеров, это такая страховка. В общем вот как всё должно выглядеть:

    a { -moz-transition: color 0.2s 0.02s ease; -o-transition: color 0.2s 0.02s ease; -webkit-transition: color 0.2s 0.02s ease; color:#222; } a:hover { color: #1FA2E1; }

    По умолчанию здесь стоит 0,2 секунды при наведении курсора и 0.02 секунды после убирания. Другими словами здесь выставляется скорость анимации. Это значение Вы можете изменять как угодно, они стоят в примере.

    В классе a:hover выставляется цвет ссылки, который будет плавно появляться при наведении на неё. По умолчанию стоит этот цвет #1FA2E1.

    Для одной ссылки на странице (или разные цвета)

    Совет

    Чтобы этот CSS эффект сделать для одной ссылки на сайте, нужно задать отдельный класс к какому либо тегу, например, h1 или li. В данном случае мы будем пресваевать класс к тегу li. Выглядит это следующим образом:

    HTML

    • WordPress

    Здесь мы придумали класс s1

    CSS

    .s1 a { -moz-transition: color 0.2s 0.02s ease; -o-transition: color 0.2s 0.02s ease; -webkit-transition: color 0.2s 0.02s ease; color:#222; } .s1 a:hover { color: #ff6f5b; }

    Всё. Теперь у нас плавность будет работать только на той ссылке где присвоен этот класс s1

    Разные цвета ссылок

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

    HTML

    • WordPress
    • Беловеб

    Как видите, что второй тег li  уже имеет класс s2.

    CSS

    .s1 a { -moz-transition: color 0.2s 0.02s ease; -o-transition: color 0.2s 0.02s ease; -webkit-transition: color 0.2s 0.02s ease; color:#222; } .s1 a:hover { color: #ff6f5b; } .s2 a { -moz-transition: color 0.2s 0.02s ease; -o-transition: color 0.2s 0.02s ease; -webkit-transition: color 0.2s 0.02s ease; color:#222; } .s2 a:hover { color: #55b857; }

    Одним словом здесь мы задаём каждой ссылке отдельный цвет при наведении, а потом каждый класс задаём тегу (li) на странице.

    Плавное смещение ссылки вправо на странице

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

    Делается этот плавный сдвиг довольно просто. Всего лишь нужно присвоить к списку на странице тег div с соответствующим классом.

    Для начала нам нужен сам html код списка, делать мы его будем с помощью тегов ul и li:

    HTML

    • WordPress
    • Плагины
    • Шаблоны

    Как Вы уже заметили, что мы к списку добавили тег  с классом sdvig.

    Теперь, чтобы всё заработало в стили нужно добавить следующее:

    CSS

    .sdvig a { -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; color:#222; display:block; } .sdvig a:hover { -webkit-transform: translate(8px,0); -moz-transform: translate(8px,0); -o-transform: translate(8px,0); color: #1FA2E1; }

    По умолчанию (как в примере) скорость анимации стоит 0.1 секунд, а расстояние сдвига в 8px. Естественно эти значения Вы можете изменять, поэкспериментировать, так сказать. 🙂

    Посмотреть пример

    Вот и всё, друзья. Если возникнут вопросы, жду Ваших комментарием. Пока.

    Источник: http://beloweb.ru/novichkam/kak-sdelat-krasivyie-effektyi-dlya-ssyilok-na-css3-a-imenno-plavnoe-izmenenie-tsveta-pri-navedenii-i-plavnyiy-sdvig-vpravo.html

    Состояния ссылок: link, visited, hover, active — учебник CSS

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

    Какими бывают состояния ссылок

    Взаимодействия пользователя с элементами веб-страницы отслеживаются браузером. Если говорить о ссылках, им присваивается определенный статус в зависимости от того, какое действие было совершено (наведение, нажатие, переход по ссылке и т. д.). Это мы и называем состояниями ссылок.

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

    • :hover — ссылка, на которую наведен курсор;
    • :active — активная ссылка (та, по которой совершается клик, или на которой удерживается кнопка мыши);
    • :link — ссылка, еще не посещенная пользователем;
    • :visited — посещенная ссылка.

    Для справки: из соображений безопасности набор стилей, которые можно использовать для ссылок :visited, ограничен. Посещенные ссылки принимают только свойства color, background-color, border-color (и его производные), column-rule-color, outline-color.

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

    JavaScript-метод getComputedStyle всегда возвращает значение цвета непосещенных ссылок, даже если у посещенных ссылок цвет иной.

    Стилизация состояний

    С помощью псевдокласса :hover можно существенно изменить стиль ссылки, которая находится в состоянии наведенного на нее курсора. Простейший пример:

    a { color: red; } /* обычный цвет ссылки */ a:hover { color: blue; } /* цвет ссылки, на которую наведен курсор */

    Псевдокласс :active также поддается гибкой стилизации:

    a:active { background-color: yellow; } /* цвет фона ссылки в момент нажатия на нее */

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

    a:link { color: red; } a:visited { color: grey; } a:hover { color: blue; } a:active { background-color: yellow; }

    Что будет, если поменять строки местами? В этом случае некоторые стили перестанут работать согласно правилам каскадности. Дело в том, что ссылка может находиться одновременно в двух состояниях, к примеру, в :visited и в :hover, и если расположить стиль для :hover выше, чем стиль для :visited, то первый перекроется.

    Выбор ссылок с помощью селекторов

    Как записать селектор с псевдоклассом для определенной группы ссылок? Например, если вам нужно применить какой-то стиль для всех ссылок навигационного меню с идентификатором #main-menu, когда такая ссылка находится в состоянии наведенного на нее курсора, вы можете использовать такой селектор:

    #main-menu a:hover {background-color: #a38beb;}

    Либо, если у каждой ссылки этого меню дополнительно имеется свой класс (допустим, это .menu-link), то такая запись тоже подойдет:

    #main-menu a.menu-link:hover {background-color: #a38beb;} #main-menu .menu-link:hover {background-color: #a38beb;} /* так тоже сработает */

    Чтобы определить стили для всех состояний данных ссылок, запишите для каждого псевдокласса отдельное правило:

    #main-menu .menu-link:link { color: red; } #main-menu .menu-link:visited { color: grey; } #main-menu .menu-link:hover { background-color: #a38beb; } #main-menu .menu-link:active { background-color: yellow; }

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

    Источник: https://idg.net.ua/blog/uchebnik-css/ispolzovanie-css/sostoyaniya-ssylok-css

    Красим ресницы блогу – изменяем цвет ссылок

    Здравствуйте, дамы и господа!

    Сегодня мы займемся вопросом красоты.

    (Постоянные читатели блога могут обновить кэш браузера Ctrl+F5 для актуализации внешнего вида блога.)

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

    Вот эти статьи:

    1. Изменяем стиль заголовка h2

    2. Как изменить стиль отдельного пункта меню или отдельной рубрики

    3. Как изменить заголовок на странице рубрики

    4. Изменяем шрифт заголовка статей

    5. Оформление формы подписки по email

    Сейчас хочу изменить цвет ссылок на блоге и рассказать вам как это сделать.

    Вот так выглядели ссылки на этом сайте до внесения изменений:

    Как видите, достаточно бледно и незаметно. Наверное, если б не указал на эти ссылки стрелками, то из трех ссылок можно было заметить только “Читать далее”, и то потому что она выделена жирным шрифтом.

    Читайте также:  Платежная система rbkmoney

    Здесь сразу приведу скрин того, что у меня получилось после изменения цвета и стиля ссылок, чтобы можно было сравнить вариант “до” и “после”.

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

    А какой вам вариант нравится больше?

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

    Обратите внимание

    Задумано – сделано. То как преобразился вид моего блога мне очень понравилось! Казалось бы такая мелочь – цвет ссылок – небольшие изменения в css-файле, а какой эффект!

    Это вызвало у меня ассоциацию с макияжем у девушек. =) А если проводить более точную аналогию, то именно с подкрашивание ресниц и подчеркиванием контура глаз с помощью карандаша. (Я вот тоже подчеркнул ссылки.)

    Ладно, давайте ближе к делу, что и где я изменил.

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

    1. Название css-файла, в котором описаны стили для ссылки (style.css).

    2. При наведение указателя мыши на style.css всплывает подсказка с указанием абсолютного пути к файлу и номером строки в которой описан стиль для анализируемого элемента веб-страницы.

    3. Собственно, цвет ссылки.

    Какая мощная вещь – анализ кода! Все ясно – заходи в указанный файл и изменяй цвет. Но, давайте не будем спешить! Дело в том, что изменение значения цвета в указанной строке изменит цвет всех ссылок сайта.

    Если вам это и надо – изменить цвет для всех ссылок сайта, то отлично. Подбирайте нужный цвет и вносите соответствующее изменение в ваш css файл.

    Я же хочу оставить черным цветом ссылки в сайдбаре и ссылки-заголовки статей. Единственное – при наведении курсора сделать их зелеными. В содержимом же статьи изменить цвет на более светлый синий и так же при наведении указателя мыши – изменять на зеленый цвет.

    Опять с помощью анализа элемента выясняю, что все ссылки, которые я хочу сделать светло-синими расположены в блоке<\p>

    Важно

    Чтобы изменения коснулись только ссылок внутри блока с id=”content” нужно при описании стиля написать #content a. Собственно, вот стили, которые я добавил:

    #content a {    color: #399dda;    border-bottom: 1px solid #c0e4fc;    padding-bottom: 1px;}#content a:hover {    color: #77c069;    border-bottom: 1px solid #77c069;    padding-bottom: 1px;}

    color –  понятно – цвет

    border-bottom – граница снизу (подчеркивание), сплошное шириной в 1px, заданного цвета

    padding-bottom – отступ от текста ссылки до нижней границы.

    a:hover – означает, что стиль будет применен при наведении курсора мыши на ссылку.

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

    А все потому, что стиль для них был описан с помощью селектора .title a.Это означает – для всех ссылок внутри блоков с классом class=”title”.

    Но, приоритет селектора #content a выше, поэтому стили #content a перекрывали стили .title a.

    Чтобы этого не происходило, я добавил #content перед .title a. Теперь все .title a внутри #content получат свой собственный стиль, отличный от #content a:

    #content .title a {    text-decoration: none;    color: #323539;    border-bottom: hidden;}#content .title a:hover {    text-decoration: none;    color: #77c069;    border-bottom: hidden;}

    И для полноты описания всех, сделанных мной, изменений приведу еще один откорректированный стиль. Он касается ссылок в сайдбаре.

    .sidebar a:hover {    border-bottom: 1px solid #77c069;    padding-bottom: 1px;    color:#77c069;}

    Теперь, при наведенном указателе мыши, ссылки в сайдбаре будут зелеными (с подчеркиванием).

    Итак, подведем итог.

    Для изменения цвета ссылок нужно изменить значение свойства color для соответствующего селектора:

    -все ссылки;

    #idname a – все ссылки внутри блока с id=”idname”;

    .classname a – все ссылки внутри блока с классом classname.

    При этом, приоритет #idname выше, чем у .classname

    a:hover – определяет стиль элемента при наведении указателя мыши.

    Спасибо за внимание! Надеюсь, понятно изложил. Жду ваших комментариев.

    Источник: http://wordpress-life.ru/kak-izmenit-tsvet-ssyilok.html

    Ссылки в CSS при наведении

    Основой интернета является гипертекст. Гипертекст состоит из узлов перехода от одного текста к какому-либо другому и эти узлы именуются ссылками.

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

    Выделение и подчеркивание ссылок

    Подчеркнутые ссылки — это один из общепринятых стандартов всемирной паутины.
    К сожалению, некоторые вебмастеры ищут сомнительную, на мой взгляд, оригинальность, уходят от негласных правил и не подчеркивают ссылки в силу каких-либо обстоятельств. Чаще всего такие обстоятельства выливаются в обыденную фразу: «Подчеркнутые ссылки портят дизайн».

    Также существует еще одно утверждение, о котором говорит даже А. Лебедев: «Активные ссылки должны быть синего цвета». Однако в настоящее время синий цвет #0000FF в ссылках используется все более редко, так как web-дизайнеры предпочитают сделать ее более подходящей к основному тону сайта.

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

    Совет

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

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

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

    Если он очистит cookies, то все ссылки вновь окажутся «непосещенными», то есть синими.

    Псевдоклассы CSS: ссылки при наведении

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

    a:link { /*Используется для непосещенных ссылок*/ } a:visited { /*Используется для посещенных ссылок*/ } a:hover { /*Этот псевдокласс используется для ссылок, над которыми находится курсор мыши*/ } a:active { /*Используется для активных ссылок*/ }

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

    color: /*Цвет ссылки. Например, color: #b32020; Цвета подбирайте в фотошопе*/ background-color: /*Цвет фона ссылки*/ font-style: /*Начертание шрифта: обычное (normal), наклонное (oblique) или курсивное (italic) */ letter-spacing: /*Расстояние между буквами, задается в пикселях. Например, letter-spacing: 10px */ font-weight: /*Насыщенность шрифта. bold — полужирное, bolder — жирное, lighter — светлое, normal — нормальное начертание. Либо можно использовать цифры от 100 до 900*/ text-decoration: /*Оформление текста. Имеет несколько параметров: мигает раз в секунду (blink), перечеркнутый текст (line-through), надчеркнутый текст (overline), перечеркнутый текст (underline), без всех эффектов (none)*/

    Если вы всё же решили убрать подчеркивание у ссылок на сайте, то в параметрах у вышеназванных псевдоклассах пропишите text-decoration: none.

    Источник: http://seo-praktika.com/links-css-podcherkivanie.html

    Свойства и оформление ссылок в CSS

    ссылка

    Разъяснение:

    a:link – это свойство ссылки;
    color:#006400; — это оформление ссылки, которое ставится между скобками {}.

    Результат:

    ○ не посещенная ссылка a:link будет зеленого цвета;
    ○ посещенная ссылка a:visited будет желтого цвета;
    ○ ссылка, при наведении на нее мышкой, a:hover будет красного цвета;
    ○ нажатая ссылка a:active будет серого цвета.

    Цвет фона ссылки в css

    Этот метод часто используется для создания меню или кнопок на веб-сайтах. Для этого воспользуемся правилом background-color.
    Для примера пропишем правило background-color для свойства a:link и a:hover.

    Пример:

    ссылка

    Результат:

    Если навести курсор мышки на ссылку, то цвет фона ссылки изменится.

    Как изменить размер ссылки?

    Здесь тоже ничего сложного нет. Для того, чтобы изменялся размер ссылки при наведении на нее мышкой, воспользуемся правилом font-size для свойства a:hover.

    Пример:

    ссылка

    Результат:

    Если навести курсор мышки на ссылку, тогда ее размер увеличится на 25 пикселей (размер можете выставлять на ваше усмотрение).

    Ссылка без подчеркивания

    Также CSS дает возможность сделать ссылку без подчеркивания. Для этого воспользуемся правилом text-decoration для свойства a:link.

    Пример:

    ссылка

    Результат:

    Ссылка отображается в виде простого слова, без какого-либо подчеркивания.

    Если вы хотите сделать, чтобы при наведении курсора появлялось подчеркивание, тогда добавьте правило text-decoration для свойства a:hover.

    Пример:

    ссылка

    Изменение цвета подчеркивания

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

    Пример:

    Ссылка

    Результат:

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

    Ссылки разных цветов и размеров

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

    Пример:

    | Ссылка 1 | Ссылка 2 | Ссылка 3 |

    Результат:

    Как сделать изображение ссылкой?

    Заменить текстовую ссылку можно изображением (рисунком). Изображение должно быть прописано в коде между тегами  и , смотрите в примере.

    Пример:

    Результат:

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

    Последние новости категории:

    Источник: https://bloggood.ru/css-osnovi-primer-podskazki/svojstva-i-oformlenie-ssylok-v-css.html/

    Ссылка на основную публикацию