Изменение цвета при наведении css: Как плавно изменить цвет ссылки? — Независимое театральное объединение "Зрительские симпатии"

Содержание

Потрясающие эффекты CSS3 при наведении

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
 
.ch-thumb {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
 
    -webkit-transform-origin: 95% 40%;
    -moz-transform-origin: 95% 40%;
    -o-transform-origin: 95% 40%;
    -ms-transform-origin: 95% 40%;
    transform-origin: 95% 40%;
 
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
 
.ch-thumb:after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
    top: 40%;
    left: 95%;
    margin: -4px 0 0 -4px;
    background: rgb(14,14,14);
    background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    box-shadow: 0 0 1px rgba(255,255,255,0.9);
}
 
.ch-info {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #c9512e url(../images/noise.png);
    box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}
 
.ch-item:hover .ch-thumb {
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
    -webkit-transform: rotate(-110deg);
    -moz-transform: rotate(-110deg);
    -o-transform: rotate(-110deg);
    -ms-transform: rotate(-110deg);
    transform: rotate(-110deg);
}

Кнопка, изменяющая свой цвет при наведении на нее курсора

202

Примеры переливающихся и меняющих свой цвет текстов мы уже рассматривали ранее. Теперь на очереди стоят кнопки (input type=»button»). Рассмотрим JavaScript код, позволяющий изменять цвет кнопки при наведении на нее курсора мышки.

Собственно вот так выглядит пример работы рассматриваемого скрипта:

Для получения таких кнопок, изменяющих свой цвет текста при наведении курсора мышки, поместите следующий скрипт в начало Вашей странички:

JavaScript код:

<script type="text/javascript">
function color_button(x) {
    if ("INPUT"==event.srcElement.tagName) event.srcElement.className=x;
}
</script>

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

HTML код:

<form name="primer" align="center" onmouseover="color_button('start')"
onmouseout="color_button('')">
    Наведите курсор мыши на одну из кнопок!<br>
    <input type="button" value="Кнопка № 1">
    <input type="button" value="Кнопка № 2">
    <input type="button" value="Кнопка № 3">
</form>

Еще не забудьте вставить в заголовок странички (между тегами <head> и </head>) стиль, который будет применен к нашим кнопкам при наведении на них курсора мышки:

HTML код:

<style type="text/css">
 
    .start { color: yellow; background: green; }
</style>

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

Дата создания: 14:10:21 03.07.2011 г.

Дата обновления: 22:36:47 08.03.2012 г.

Посещений: 19936 раз(а).

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.

Учебник CSS 3. Статья «Переходные эффекты в CSS»

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

Установка переходного эффекта

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

Рис.161 Пример переходного эффекта в повседневной жизни.

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

1. Понять какое свойство нам необходимо изменить, в нашем случае это свойство background-color со значением pink:

.myElement {
background-color: pink; /* устанавливаем цвет заднего фона */
}

2. Определить каким будет конечный вид элемента, для нашего примера это элемент со свойством background-color, значение которого будет определять цвет синего цвета (например, в системе RGB — rgb(0,0,255)):

.myElement {
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона */
}

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

.myElement {
background-color: pink; /* устанавливаем цвет заднего фона */
}
.myElement:hover {
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}

Не кажется ли Вам, что мы, как кальсоновые гномы пропустили какую-то очень важную вещь в переходе от одного цвета к другому? Именно! У нас нет переходного эффекта при изменении CSS стилей элемента, и изменение цвета происходит мгновенно.

Длительность переходного эффекта

Настало время познакомиться с первым из пяти CSS свойств, которые нам позволят создавать и управлять переходными эффектами в ваших документах. Свойство transition-duration определяет, сколько

секунд или миллисекунд эффект перехода занимает времени.

Обращаю Ваше внимание, что переходные эффекты были введены в стандарте CSS 3 и поддерживаются всеми современными браузерами:

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

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

или миллисекундах (ms). Одна секунда соответствует тысяче миллисекунд.

Перейдем к примеру:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Длительность переходного эффекта при наведении</title>
<style>
div {
display: inline-block; /* элементы становятся блочно-строчными (выстраиваем в линейку) */
width: 100px; /* ширина элемента */	
height: 100px; /* высота элемента */	
background-color: pink; /* устанавливаем цвет заднего фона */
margin-right: 25px; /* внешний отступ с правой стороны */	
text-align: center; /* выравнивание текста по центру */	
}
.test1:hover {
transition-duration: .5s; /* продолжительность переходного эффекта 0,5 секунд */	
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}
 .test2:hover {
transition-duration: 1s; /* продолжительность переходного эффекта 1 секунда */	
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент  */
}
.test3:hover {
transition-duration: 1.5s; /* продолжительность переходного эффекта 1,5 секунды */	
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}
.test4:hover {
transition-duration: 2s; /* продолжительность переходного эффекта 2 секунды */	
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}

  
.test5:hover {
transition-duration: 2.5s; /* продолжительность переходного эффекта 2,5 секунды */		
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}
</style>
</head>
	<body>
		<div class = "test1">0.5s hover</div>
		<div class = "test2">1s hover</div>
		<div class = "test3">1.5s hover</div>
		<div class = "test4">2s hover</div>
		<div class = "test5">2.5s hover</div>
	</body>
</html>

В этом примере с использованием CSS свойства transition-duration мы установили различную длительность переходного эффекта для элементов <div> при наведении.

Результат нашего примера:

Рис.162 Пример переходного эффекта при наведении (длительность переходного эффекта установлена только на псевдокласс).

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

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

Давайте рассмотрим пример, в котором установим элементу отдельное значение свойства transition-duration равное 5 секундам:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Управление скоростью обратного переходного эффекта</title>
<style>
div {
display: inline-block; /* элементы становятся блочно-строчными (выстраиваем в линейку) */
width: 100px; /* ширина элемента */	
height: 100px; /* высота элемента */	
background-color: pink; /* устанавливаем цвет заднего фона */
margin-right: 25px; /* внешний отступ с правой стороны */	
text-align: center; /* выравнивание текста по центру */	
transition-duration: 5s; /* продолжительность переходного эффекта 5 секунд */
}
.test1:hover {
transition-duration: .5s; /* продолжительность переходного эффекта 0,5 секунды */
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}
.test2:hover {
transition-duration: 1s; /* продолжительность переходного эффекта 1 секунда */
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}
.test3:hover {
transition-duration: 1.5s; /* продолжительность переходного эффекта 1,5 секунды */
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}
.test4:hover {
transition-duration: 2s; /* продолжительность переходного эффекта 2 секунды */
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}
.test5:hover {
transition-duration: 2.5s; /* продолжительность переходного эффекта 2,5 секунды */
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона при наведении на элемент */
}
</style>
</head>
	<body>
		<div class = "test1">0.5s hover<br>5s element</div>
		<div class = "test2">1s hover<br>5s element</div>
		<div class = "test3">1.5s hover<br>5s element</div>
		<div class = "test4">2s hover<br>5s element</div>
		<div class = "test5">2.5s hover<br>5s element</div>
	</body>
</html>

В этом примере с использованием CSS свойства transition-duration мы установили различную длительность переходного эффекта для элементов <div> при наведении, и установили для самого элемента продолжительность переходного эффекта равного 5 секундам. Обратите внимание, что если переходный эффект не был закончен (указатель отведен раньше), то и обратный переходный эффект будет длиться пропорционально меньше.

Результат нашего примера:

Рис. 163 Управление скоростью обратного переходного эффекта.

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Управление скоростью переходного эффекта</title>
<style>
div {
display: inline-block; /* элементы становятся блочно-строчными (выстраиваем в линейку) */
width: 100px; /* ширина элемента */	
height: 100px; /* высота элемента */	
background-color: pink; /* устанавливаем цвет заднего фона */
margin-right: 25px; /* внешний отступ с правой стороны */	
text-align: center; /* выравнивание текста по центру */	
transition-duration: 2s; /* продолжительность переходного эффекта 2 секунды */
}
div:hover {
background-color: rgb(0,0,255); /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<div class = "test1">2s element</div>
		<div class = "test2">2s element</div>
		<div class = "test3">2s element</div>
		<div class = "test4">2s element</div>
		<div class = "test5">2s element</div>
	</body>
</html>

В этом примере с использованием CSS свойства transition-duration мы установили одинаковую длительность переходного эффекта для элементов <div> как при наведении, так и при переходе к первоначальному состоянию.

Результат нашего примера:

Рис. 164 Управление скоростью переходного эффекта.

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

Переходный эффект для отдельных свойств

И так, приступим к изучению особенностей следующего свойства — transition-property, оно указывает имя свойства CSS для которого используется переходный эффект. По умолчанию все свойства получают эффект перехода (значение по умолчанию all). Вы можете как полностью убрать все свойства, подлежащие переходному эффекту установив значение свойства none, так и указать конкретное свойство, или свойства, перечисленные через запятую.

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Указание длительности перехода для разных свойств</title>
<style>
div {
width: 200px; /* ширина элемента */			
height: 200px; /* высота элемента */	
font-size: 2em; /* размер шрифта */	
font-weight: bold; /* жирное начертание символов */	
text-align: center; /* выравниваем текст по центру */	
line-height: 200px; /* высота строки (выравниваем по высоте)*/
margin: 0 auto; /* выравниваем блок по горизонтали (внешними отступами)*/
color: green; /* цвет текста */
background-color: yellow; /* устанавливаем цвет заднего фона */
border: 3px solid #000; /* сплошная граница 3 пикселя черного цвета */
transition-duration: 2s, 4s, 6s; /* продолжительность переходного эффекта (для каждого свойства своя) */
transition-property: background-color, border-color, color; /* свойства, которые подлежат переходному эффекту */
}
div:hover {
background-color: #000; /* устанавливаем цвет заднего фона при наведении*/
color: red; /* устанавливаем цвет текста при наведении*/
border-color: red; /* устанавливаем цвет границ элемента при наведении*/
}
</style>
</head>
	<body>
		<div>My element</div>
	</body>
</html>

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

В этом примере с использованием CSS свойства transition-property мы установили свойства, которые подлежат переходному эффекту, а с использованием свойства transition-duration указали для них различную продолжительность.

Результат нашего примера:

Рис. 165 Указание длительности перехода для разных свойств.

Задержка перед переходным эффектом

Следующее CSS свойство — transition-delay определяет, когда эффект перехода начнется (выступает в роли задержки начала эффекта). То есть это свойство задерживает время начала переходного эффекта.

Время задержки указывается числом в секундах (s) или миллисекундах (ms). Значение по умолчанию составляет 0 секунд (отсутствие времени задержки).

По аналогии с предыдущими свойствами допускается указывать более одного значения задержки перед началом эффекта перехода. В этом случае значения указываются через запятую, и каждое новое значение задержки соответствует значению (в том же порядке), которое определено в свойстве transition-property.

Здесь есть нюанс, если список задержек меньше, чем количество значений (свойств), определённых свойством transition-property, то значения задержек эффекта перехода для оставшихся свойств будут использованы еще раз (по кругу). Если определено больше задержек, чем значений, указанных в свойстве transition-property, то список задержек усекается до количества значений этого свойства.

Рассмотрим пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Задержка переходного эффекта</title>
<style>
body, html {
height: 100%; /* высота элементов */	
margin: 0; /* убираем внешние отступы */		
}
div {
width: 100px; /* ширина элемента */			 	
height: 50px; /* высота элемента */	
background-color: yellow; /* устанавливаем цвет заднего фона */
border: 1px solid #000; /* сплошная граница размером 1 пиксель черного цвета */	
transition-duration: 500ms, 800ms; /* продолжительность переходного эффекта */	
transition-property: width, height; /* свойства, которые подлежат переходному эффекту */
transition-delay: 500ms, 800ms; /* задержка для переходного эффекта (для каждого свойства своя) */
}
div:hover {
width: 50%; /* ширина элемента при наведении */	
height: 50%; /* высота элемента при наведении */	
}
</style>
</head>
	<body>
		<div>My element</div>
	</body>
</html>

В этом примере с использованием CSS свойства transition-delay мы установили задержку для переходного эффекта (для свойства width — 500 миллисекунд, а для свойства height — 800 миллисекунд).

Результат нашего примера:

Рис. 166 Пример задержки переходного эффекта.

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Выдвижная панель на CSS</title>
<style>
body, html {
height: 100%; /* высота элементов */	
margin: 0; /* убираем внешние отступы */		
position: relative; /* относительное позиционирование */	
}
div {
position: fixed; /* фиксированное позиционирование */	
top: 30px; /* отступ от верхнего края */
right: -135px; /* отрицательный отступ от правого края (прячем элемент за экран) */
width: 200px; /* ширина элемента */			 
height: 50px; /* высота элемента */
line-height: 50px; /* высота строки */
background-color: yellow; /* устанавливаем цвет заднего фона */
border: 1px solid #000; /* сплошная граница размером 1 пиксель черного цвета */
transition-delay: 2s; /* задержка переходного эффекта 2 секунды */
}
div:hover {
transition-delay: 0s; /* отсутствие задержки при наведении на элемент */
right: 0; /* отступ от правого края равен нулю */
}
</style>
</head>
	<body>
		<div>Hover Me -----Thank you!-----</div>
	</body>
</html>

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

Результат нашего примера:

Рис. 167 Пример задержки переходного эффекта.

Изменение скорости переходного эффекта

CSS свойство transition-timing-function используется, чтобы описать, как рассчитываются промежуточные значения CSS свойства, которое находится под воздействием эффекта перехода, используя при этом математическую функцию (кубическую кривую Безье). Это, по сути, позволяет создать кривую «разгона», так что скорость перехода может меняться в течение длительности эффекта перехода.

Хочу обратить Ваше внимание, что за продолжительность переходного эффекта отвечает свойство transition-duration, а это свойство не меняет продолжительность, а лишь регулирует скорость в различные промежутки этого эффекта, например, 70% времени переходного эффекта собирайся как девушка, а 30% беги на работу как проспал, в результате чего продолжительность одна, а скорость эффекта при этом различается.

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

Свойство transition-timing-function имеет большое количество различных значений, которые определяют скорость переходного эффекта. Предлагаю Вам вкратце пробежать по ним и перейти к примерам, чтобы наглядно увидеть результат:

Значение	Описание
ease	Эффект перехода начинается медленно, затем незначительно ускоряется и в конце опять замедляется. Значение эквивалентно cubic-bezier(0.25,0.1,0.25,1). Это значение по умолчанию.
linear	Определяет эффект перехода с одинаковой скоростью от начала до конца. Значение эквивалентно cubic-bezier(0,0,1,1). Точка 1 расположена на 0 по оси x и по оси y, точка 2 — на 1 по оси x и по оси y.
ease-in	Определяет эффект перехода с медленного старта. Значение эквивалентно cubic-bezier(0.42,0,1,1).
ease-out	Определяет эффект перехода с медленным окончанием. Значение эквивалентно cubic-bezier(0,0,0.58,1).
ease-in-out	Определяет эффект перехода с медленного старта и медленным окончанием (симметричная кривая Безье). Значение эквивалентно cubic-bezier(0.42,0,0.58,1). Точка 1 расположена на 0,42 по оси x и на 0 по оси y, точка 2 — на 0,58 по оси x и на 1 по оси y.
cubic-bezier(n,n,n,n)	Определяет пользовательские значения в кубической функции Безье. Она допускает 4 числовых значения от 0 до 1 ( Первые два значения — координаты x и y первой точки, а вторые два значения — координаты x и y второй точки).
steps(int,start\|end)	Указывает пошаговую функцию, с двумя параметрами. Первый параметр задает число интервалов в функции (целое положительное число (больше 0)). Второй параметр является необязательным и имеет значения «start» или «end» и указывает точку, в которой изменение значений происходит в пределах интервала. Если второй параметр опущен, то присваивается значение «end». Значение «start» осуществляет переход в начале каждого шага, а «end» в конце каждого шага.
step-start	Значение эквивалентно steps(1, start). Свойство сразу принимает конечное значение. Значение свойства transition-duration (продолжительность перехода) игнорируется.
step-end	Значение эквивалентно steps(1, end). Свойство принимает конечное значение в конце шага (т.е. если имеется свойство transition-duration (продолжительность перехода), то оно выступит в роли задержки перехода).

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Скорость переходного эффекта в CSS</title>
<style>
div {
width: 100px; /* ширина элементов */	
height: 60px; /* высота элементов */	
background: khaki; /* устанавливаем цвет заднего фона */
display: inline-block; /* элементы становятся блочно-строчными (выстраиваем в линейку) */ 
border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */	
transition-duration: 1s; /* продолжительность переходного эффекта */}
div:hover {
height: 250px; /* высота элементов при наведении */	
background: Moccasin; /* устанавливаем цвет заднего фона при наведении */
}
.test {transition-timing-function: ease;} /* указываем значение функции перехода */	
.test2 {transition-timing-function: linear;} /* указываем значение функции перехода */	
.test3 {transition-timing-function: ease-in;} /* указываем значение функции перехода */	
.test4 {transition-timing-function: ease-out;} /* указываем значение функции перехода */	
.test5 {transition-timing-function: ease-in-out;} /* указываем значение функции перехода */	
.test6 {transition-timing-function: cubic-bezier(0.5,0.05,0.7,0.5);} /* указываем значение функции перехода */	
</style>
</head>
	<body>
		<div class = "test">ease</div>
		<div class = "test2">linear</div>
		<div class = "test3">ease-in</div>
		<div class = "test4">ease-out</div>
		<div class = "test5">ease-in-out</div>
		<div class = "test6">cubic-bezier</div>
	</body>
</html>

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

Результат нашего примера:

Рис. 168 Скорость переходного эффекта в CSS.

Давайте рассмотрим пример использования пошаговых функций в CSS, используя свойство transition-timing-function:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Скорость переходного эффекта в CSS (пошаговые функции).</title>
<style>
div {
width: 100px; /* ширина элементов */	
height: 60px; /* высота элементов */	
background: khaki; /* устанавливаем цвет заднего фона */
border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */	
margin-bottom: 10px; /* внешний отступ снизу */
}
div:hover {
width: 550px; /* ширина элемента при наведении */
}
.test {
transition-duration: 3s; /* продолжительность переходного эффекта 3 секунды */	
transition-timing-function: steps(5, end);  /* указываем значение функции перехода (пошаговая функция) */
}
.test2 {
transition-duration: 3s; /* продолжительность переходного эффекта 3 секунды */
transition-timing-function: steps(5, start); /* указываем значение функции перехода (пошаговая функция) */
}
.test3 {
transition-timing-function: step-start; /* указываем значение функции перехода (пошаговая функция) */
}
.test4 {
transition-duration: 1s; /* продолжительность переходного эффекта 1 секунда */
transition-timing-function: step-end; /* указываем значение функции перехода (пошаговая функция) */
}
</style>
</head>
	<body>
		<div class = "test">steps(5, end)</div>
		<div class = "test2">steps(5, start)</div>
		<div class = "test3">step-start</div>
		<div class = "test4">step-end</div>
	</body>
</html>

В этом примере с использованием CSS свойства transition-timing-function мы указали различные пошаговые функции.

Обратите внимание, что при использовании функции step-start значение свойства transition-duration (продолжительность перехода) игнорируется, а при использовании функции step-end оно выступает в роли задержки перехода.

Результат нашего примера:

Рис. 169 Скорость переходного эффекта в CSS (пошаговые функции).

Универсальное свойство transition

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

Это свойство является короткой записью для следующих свойств, которые мы изучили (список соответствует порядку указания значений):

Синтаксис свойства:

transition:"property duration timing-function delay"; /* порядок важен */

Обращаю Ваше внимание, что если вы хотите задать только задержку (transition-delay), то вам придется указать и продолжительность (transition-duration) равную нулю (0s). Например, если вы хотите указать задержку 4 секунды, то вам необходимо записать это так:

transition: 0s 4s; /* задержка четыре секунды */

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

transition: width 2s ease 100ms, height 1s linear 2s, background 0s 4s;

/* Для свойства width мы устанавливаем длительность эффекта перехода равную 2 секунды,
при этом эффект перехода начинается медленно, затем незначительно ускоряется и в конце опять замедляется (ease)
и это всё происходит с предварительной задержкой в 100 миллисекунд.

Для свойства height мы устанавливаем длительность эффекта перехода равную 1 секунде,
при этом эффект перехода происходит с одинаковой скоростью от начала до конца (linear)
и это всё происходит с предварительной задержкой в 2 секунды.

Свойство background будет применено с задержкой 4 секунды. */

Давайте, в заключение статьи рассмотрим пример в котором создадим переходный эффект для элемента <input>.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример использования универсального свойства transition</title>
<style>
input[type=text] {
width: 20%; /* ширина элемента */
transition: width 500ms ease-in-out; /* описываем переходный эффект (свойство, продолжительность и функция) */
}
input[type=text]:focus {
width: 40%; /* ширина элемента при фокусе на элементе */
}
</style>
</head>
	<body>
		Поиск: <input type = "text" name = "poisk" placeholder = "введите запрос">
	</body>
</html>

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

Результат нашего примера:

Рис. 170 Пример использования универсального свойства transition.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

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

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

seodon.ru | Учебник HTML — Меняем цвета ссылок

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

В старых версиях HTML существовали специальные атрибуты тега <BODY>, позволяющие изменять цвет ссылок на HTML-странице, это link, alink и vlink, но в современном HTML их нет. Поэтому мы опять будем использовать стили (CSS), а значит что? Вот и неправильно, не атрибут style, а так называемые внутренние стили. Для этого нам надо будет в «шапку» страницы (<HEAD>) вставить тег <STYLE type=»text/css»>…</STYLE>, а внутри него указать один или несколько следующих стилей:

<style type="text/css">
a:link {color:цвет}    /* цвет непосещенной ссылки */
a:visited {color:цвет} /* цвет посещенной ссылки */
a:hover {color:цвет}   /* цвет ссылки при наведении курсора мыши */
a:active {color:цвет}  /* цвет активной ссылки (в момент нажатия) */
</style>

C тегом <STYLE> вы пока еще не знакомы, но тут и учить нечего. Он используется для внутренних стилей, которые будут действовать в пределах всей страницы. А его атрибут type как раз и говорит браузеру о том, что внутри находятся стили (CSS), а не обычный текст.

Что касается самих стилей, то сначала там идет имя тега, к которому применяется стиль (в нашем случае это <A>), затем после двоеточия указывается к какой именно ссылке применяется стиль (link, visited, hover, active). Ну а то, что находится в фигурных скобках { } вам должно быть уже хорошо известно по предыдущим урокам. И не забывайте про совет: лучше всегда задавать цвет в HEX-формате со знаком решетка (#) впереди, а не писать имя цвета.

Пример изменения цвета ссылок в HTML-странице

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение цвета ссылок на странице</title>
<style type="text/css">
a:link {color:#006699}
a:visited {color:#990066}
a:hover {color:#669900}
a:active {color:#FF0000}
</style>
</head>
<body>
 <p><a href="http://seodon.ru/">Как создать сайт</a></p>
 <p><a href="http://spravka.seodon.ru/">Справочники по HTML и CSS</a></p>
</body>
</html>

Результат в браузере

Если вы недавно были на страницах указанных в ссылках, то естественно ссылки будут сразу окрашены в «посещенный» цвет.

Изменяем цвет отдельных ссылок

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

Пример использования тегов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение цвета ссылок на странице</title>
<style type="text/css">
a:link {color:#006699}
a:visited {color:#990066}
a:hover {color:#669900}
a:active {color:#FF0000}
</style>
</head>
<body>
 <p><a href="http://seodon.ru/">Сайт Seodon.ru</a></p>

 <p>
  Здесь вы можете найти
  <a href="http://spravka.seodon.ru/">
   справочник по тегам HTML
  </a>
 </p>
</body>
</html>

Результат в браузере

Домашнее задание.

Создайте три блока DIV и пусть их фон будет цвета #EEEEEE.
Разместите в каждом DIV’е по одной ссылке. Пусть они ведут на любые сайты в интернете.
В каждой ссылке сделайте так, чтобы при наведении на нее курсора мыши появлялась соответствующая подсказка.
Пусть цвет непосещенной ссылки будет #FF0099, посещенной — #009933, при наведении курсора мыши — #0099FF, активной — #00FF66.

Посмотреть результат → Посмотреть ответ

Классы Bootstrap 4, изменяющие цвет текста и фона

В Bootstrap-4 существует ряд классов, которые связаны с назначением цветовых характеристик для шрифта или для фона элемента. Они похожи по названию, но отличаются внешне.

Классы, изменяющие цвет шрифта

Цвет шрифта задается следующими классами:

<p>.text-primary</p> <p>.text-secondary</p> <p>.text-success</p> <p>.text-danger</p> <p>.text-warning</p> <p>.text-info</p> <p>.text-light</p> <p>.text-dark</p> <p>.text-muted</p> <p>.text-white</p>

<p>.text-primary</p>

<p>.text-secondary</p>

<p>.text-success</p>

<p>.text-danger</p>

<p>.text-warning</p>

<p>.text-light</p>

<p>.text-muted</p>

<p>.text-white</p>

See the Pen Bootstrap 4 Color classes by Elen (@ambassador) on CodePen.18892

Классы для изменения цвета ссылок

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

See the Pen Bootstrap 4 Link Classes by Elen (@ambassador) on CodePen.18892

Можно увидеть при наведении на ссылки или при переходе по ним клавишей Tab, что происходит изменение цвета. Стилизация отсутствует для классов ссылок .text-white and .text-muted.

Классы, изменяющие цвет фона

<div>.bg-primary</div> <div>.bg-secondary</div> <div>.bg-success</div> <div>.bg-danger</div> <div>.bg-warning</div> <div>.bg-info</div> <div>.bg-light</div> <div>.bg-dark</div> <div>.bg-white</div>

<div>.bg-primary</div>

<div>.bg-secondary</div>

<div>.bg-success</div>

<div>.bg-danger</div>

<div>.bg-warning</div>

<div>.bg-light</div>

<div>.bg-white</div>

See the Pen Bootstrap 4 Background Color classes by Elen (@ambassador) on CodePen.18892

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

Классы для создания градиентного фона

Используя стандартную таблицу стилей Bootstrap-4, вы не сможете назначить эти классы и получить отображение градиентного фона в блоках, т.к. этим процессом управляет SCSS-переменная $enable-gradients, которая по умолчанию равна false и доступна для редактирования в файле _variables.scss из пакета исходных файлов Bootstrap.

<div>.bg-gradient-primary</div> <div>.bg-gradient-secondary</div> <div>.bg-gradient-success</div> <div>.bg-gradient-danger</div> <div>.bg-gradient-warning</div> <div>.bg-gradient-info</div> <div>.bg-gradient-light</div> <div>.bg-gradient-dark</div>

<div>.bg-gradient-primary</div>

<div>.bg-gradient-secondary</div>

<div>.bg-gradient-success</div>

<div>.bg-gradient-danger</div>

<div>.bg-gradient-warning</div>

<div>.bg-gradient-info</div>

<div>.bg-gradient-light</div>

<div>.bg-gradient-dark</div>

Но, изменив значение этой переменной на true, и скомпилировав новый css-файл, вы вполне сможете использовать градиентные фоны от Bootstrap-4. Не факт, что они вам так уж сильно понадобятся, т.к. градиентные переходы в этих классах очень мягкие, почти незаметные. Наверное, именно поэтому разработчики по умолчанию не включили эти классы в состав bootstrap.css.

Ссылки на документацию Bootstrap:

На английском
На русском

Псевдоклассы — CSS | MDN

Fullscreen API	Живой стандарт	Определён `:fullscreen`.
HTML Living Standard	Живой стандарт	Нет изменений от HTML5.
Selectors Level 4	Рабочий черновик	Определены `:any-link`, `:local-link`, `:scope`, `:active-drop-target`, `:valid-drop-target`, `:invalid-drop-target`, `:current`, `:past`, `:future`, `:placeholder-shown`, `:user-error`, `:blank`, `:nth-match()`, `:nth-last-match()`, `:nth-column()`, `:nth-last-column()` и `:matches()`. Нет существенных изменений для псевдоклассов, определённых в Selectors Level 3 и HTML5 (не рассматрия семантическое значение).
HTML5	Рекомендация	Определено семантическое значение в HTML контексте для `:link`, `:visited`, `:active`, `:enabled`, `:disabled`, `:checked` и `:indeterminate`. Определены `:default`, `:valid`, `:invalid`, `:in-range`, `:out-of-range`, `:required`, `:optional`, `:read-only`, `:read-write` и `:dir()`.
CSS Basic User Interface Module Level 3	Рекомендация	Определены `:default`, `:valid`, `:invalid`, `:in-range`, `:out-of-range`, `:required`, `:optional`, `:read-only` и `:read-write`, но без связанного семантического значения.
Selectors Level 3	Рекомендация	Определены `:target`, `:root`, `:nth-child()`, `:nth-last-of-child()`, `:nth-of-type()`, `:nth-last-of-type()`, `:last-child`, `:first-of-type`, `:last-of-type`, `:only-child`, `:only-of-type`, `:empty` и `:not()`. Определён синтаксис для `:enabled`, `:disabled`, `:checked` и `:indeterminate`, но без связанного семантического значения. Нет значительных изменений для псевдоклассов, определённых в CSS Level 2 (Revision 1).
CSS Level 2 (Revision 1)	Рекомендация	Определены `:lang()`, `:first-child`, `:hover` и `:focus`. Нет значительных изменений для псевдоклассов, определённых в CSS Level 1.
CSS Level 1	Рекомендация	Определены `:link`, `:visited` и `:active`, но без связанного семантического значения.

Links ссылки в CSS при наведении. Уроки для начинающих академия

С CSS, ссылки могут быть стилизованы по-разному.

Text Link Text Link Link Button Link Button

Укладка ссылки

Ссылки могут быть стилизованы под любое свойство CSS (например, color, font-family, background и т.д.).

Пример

a {
color: hotpink;
}

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

Четыре ссылки состояний:

a:link — Обычная, непосещаемая ссылка
a:visited — ссылка, которую посетил пользователь
a:hover — ссылка, когда пользователь мыши над ним
a:active — Ссылка момент щелчка

Пример

/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */
a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}

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

a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover

Оформление текста

Свойство text-decoration в основном используется для удаления подстрочных ссылок:

Пример

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}

Цвет фона

Свойство background-color может использоваться для указания цвета фона для ссылок:

Пример

a:link {
background-color: yellow;
}

a:visited {
background-color: cyan;
}

a:hover {
background-color: lightgreen;
}

a:active {
background-color: hotpink;
}

Дополнительные кнопки-ссылки

В этом примере демонстрируется более продвинутый пример, в котором мы объединяем несколько свойств CSS для отображения ссылок в виде полей/кнопок:

Пример

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
background-color: red;
}

Другие примеры

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

Advanced-создание кнопки связи с границами
Еще один пример создания полей/кнопок ссылок.

Изменение курсора
Свойство Cursor указывает тип отображаемого курсора. В этом примере демонстрируются различные типы курсоров (могут быть полезны для ссылок).

: hover — CSS: каскадные таблицы стилей

Псевдокласс : hover CSS совпадает, когда пользователь взаимодействует с элементом с помощью указывающего устройства, но не обязательно его активирует. Обычно он срабатывает, когда пользователь наводит курсор на элемент (указатель мыши).

 
a: hover {
  оранжевый цвет;
}

Стили, определенные псевдоклассом : активный , будут переопределены любым последующим псевдоклассом, связанным со ссылками (: ссылка , : посещенный или : активный ), который имеет по крайней мере такую же специфичность.Чтобы правильно оформить ссылки, поместите правило : hover после правил : link и : посещено , но перед правилом : active , как определено в LVHA-order : : link — : посетил — : завис — : активен .

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

Базовый пример

HTML

   Попробуйте навести курсор мыши на эту ссылку.

CSS

  а {
  цвет фона: синий;
  переход: цвет фона .5s;
}

a: hover {
  цвет фона: золото;
}

Результат

Галерея изображений

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

Примечание: Для аналогичного эффекта, но на основе псевдокласса : checked (применяется к скрытым радиобоксам), см. Эту демонстрацию, взятую со справочной страницы: checked.

таблицы BCD загружаются только в браузере

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

Подпишитесь на нашу рассылку новостей.

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

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

В этом уроке мы используем значки FontAwesome. Иконочные шрифты идеально подходят для работы, когда вы хотите легко изменить цвета ссылок. Все, что вам нужно сделать, это изменить их свойство color в вашем файле CSS. Если вы используете SVG вместо FontAwesome, вы можете легко изменить цвет с помощью свойства fill . Для файлов изображений PNG и JPEG вам необходимо предоставить два набора изображений с разными цветами для каждого значка, один для обычного состояния и один для состояния наведения.Вот почему ссылки с использованием шрифтов значков и изображений SVG намного практичнее:

// Пример изменения цвета шрифта значка .значок { цвет: # 000; } .icon: hover { цвет: #fff } // Пример изменения цвета иконки SVG .значок { заполнить: # 000; } .icon: hover { заполнить: #fff }

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

.ct-icon-box .ct-icon-box { курсор: указатель; }

Внешние ссылки

Начнем с включения необходимых ссылок на источники Bootstrap и FontAwesome в файл HTML:

HTML

Ниже у нас есть код для контейнера Bootstrap с тремя ссылками. Замените # в атрибуте onclick адресом ссылки, которую вы хотите поместить.Скопируйте и вставьте приведенный ниже код и не стесняйтесь настраивать макет и количество ссылок по своему усмотрению:

<я aria-hidden = "true">

Новости

<я aria-hidden = "true">

События

<я aria-hidden = "true">

Галерея

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

CSS

Вот полный код CSS. У нас есть div с именем класса .ct-icon-box , который содержит все поля значков. Каждое поле значка в div с именем класса .ct-icon-box . Нам не нужно отдельно выбирать значки и заголовки, чтобы задать их цвет.Мы просто выбираем элемент .ct-icon-box , и когда мы даем ему значение цвета, он устанавливает это значение как для значка, так и для цвета заголовка:

.ct-icon-box .ct-icon-box { padding-top: 8 пикселей; ширина: 50%; плыть налево; положение: относительное; граница: 2px solid #ccc; минимальная высота: 267 пикселей; дисплей: встроенная таблица; выравнивание текста: центр; цвет: # 292929; нижнее поле: -2 пикселя; курсор: указатель; } .ct-icon-box: hover { фон: # d60e96; цвет: #fff; } .ct-icon-box { маржа: 65 пикселей авто; максимальная ширина: 525 пикселей; перелив: авто; ясно: оба; } .ct-icon-box .ct-icon-box__header { размер шрифта: 22 пикселя; преобразование текста: прописные буквы; } section h4 { font-weight: 600; межбуквенный интервал: 0,5 пикселя; } .ct-icon-box .ct-icon-box.bottom-all { ширина: 99.5%; минимальная высота: 250 пикселей; нижнее поле: 2 пикселя; } @media only screen и (min-width: 480px) { .ct-icon-box .ct-icon-box.top-right, .ct-icon-box .ct-icon-box.bottom-right { маржа слева: -2px; } } .ct-icon-box .ct-icon-box> .ct-icon-box .ct-icon-box__inner, .ct-icon-box .ct-icon-box> .inner { дисплей: таблица-ячейка; ширина: 100%; вертикальное выравнивание: по центру; } .container { маржа: 0 авто; }

А вот и готовые ссылки на иконку. Наведите указатель мыши на поля со значками, чтобы увидеть эффект наведения:

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

Спасибо за использование треков!

Этот CSS заставит ссылки меню менять цвет при наведении на них:

  .menu-primary ul a: hover,
.menu-primary ul a: активный,
.menu-primary ul a: focus {
  цвет синий;
}

И если вы хотите, чтобы они оставались определенного цвета после посещения, вы также можете добавить этот CSS:

 .menu-primary ul a: visit {
  цвет синий;
}

Большое спасибо, у меня есть еще 2 небольших вопроса.

— У меня небольшая проблема, когда я меняю цвет фона своего веб-сайта с помощью следующего кода

 кузов ,
.excerpt,
.главный,
.menu-primary ul,
#Заголовок сайта {
фон: # 000;
}

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

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

А можно сделать?

Большое спасибо 🙂

Вот обновленная версия этого кода, которая не повлияет на фон сообщений на главной странице:

 кузов ,
.главный,
.menu-primary ul,
#Заголовок сайта {
  фон: # 000;
}

Другая настройка на самом деле довольно проста с использованием псевдоэлемента, например:

  .featured-image: после {
содержание: '';
позиция: абсолютная;
верх: 0;
справа: 0;
внизу: 0;
слева: 0;
фон: фиолетовый;
непрозрачность: 0.5;
переход: непрозрачность 0,2 с;
}
.featured-image: hover: after {
непрозрачность: 0;
}

Вы можете заменить «фиолетовый» на другой оттенок с помощью шестнадцатеричного кода. Непрозрачность установлена на 50% (0,5), и вы можете использовать диапазон от 0,1 до 1, чтобы изменить это. Наконец, я добавил переход, который длится 0,2 секунды, чтобы он выглядел более плавным, и вы можете изменить значение 0,2 секунды, чтобы сделать анимацию медленнее или длиннее, если хотите.

Этот ответ был изменен 1 год, 10 месяцев назад пользователем Ben Sibley.

Мягкая цветная анимация при наведении курсора на ссылку с помощью CSS

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

Например, в теме, которую я создал для Super Dev Resources, я использовал эту мягкую цветную анимацию для изменения цвета заголовка сообщения при наведении курсора на ссылку.

CSS Цветовой переход при наведении курсора на ссылку

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

 a {
  цвет: # 16a085;
  -webkit-transition: цвет .5s линейный;
  -moz-переход: цветной .5s линейный;
  -ms-переход: цветной .5s линейный;
  -o-переход: цветной .5s линейный;
  переход: цветной .5s линейный;
}

a: hover {цвет: # e74c3c; }

Таким образом, мы говорим браузеру изменить цвет ссылки с Green sea # 16a085 на Alizarin # e74c3c, постепенно (линейно) в течение времени 0.5 секунд. Вы можете поиграть со значением времени, чтобы достичь желаемого эффекта, однако я рекомендую не делать это слишком медленным.

Вы можете увидеть этот код в действии во вставке пера кода ниже. Обратите внимание, что я использовал отдельный CSS-класс «soft-link», чтобы показать разницу между наведением ссылки по умолчанию и эффектом наведения ссылки с примененным переходом.

См. Мягкую цветную анимацию Pen при наведении ссылки, автор Канишк Кунал на CodePen.0

Подобно применению эффектов перехода к цветам при наведении ссылки, вы можете применить их и к другим атрибутам, например к цвету фона.Если вы хотите еще больше оживить эффекты наведения ссылки, я рекомендую проверить эти эффекты Creative Link на Codrops.

Как стилизовать гиперссылки с помощью CSS // Squarespace Tutorial — InsideTheSquare.co

Не все типы текста одинаковы.

Заголовок 1, заголовок 2, заголовок 3 и обычный текст абзаца — все это необходимо вызывать в этом коде. Если вы хотите, чтобы одинаковый эффект имел место для всех ссылок всех типов, используйте это: h2 a, h3 a, h4 a, p a {…код идет сюда …}

Нет необходимости использовать собственный CSS для всего.

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

Эффекты наведения — это то, что вам нужно.

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

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

Заголовок один: h2 a {… здесь идет код…}
Заголовок два h3 a {… здесь идет код…}
Заголовок третий: h4 a {… здесь идет код…}
Обычный текст / текст абзаца: pa {… здесь идет код…}
Весь текст заголовка: h2 a, h3 a, h4 a {… здесь идет код…}
Все типы текста: h2 a, h3 a, h4 a, pa {… здесь идет код…}

УДАЛИТЬ ПОДЛИНЮ ИЗ ВСЕХ ТИПОВ ТЕКСТА

h2 a, h3 a, h4 a, pa {border-bottom-style: none! important;}

ИЗМЕНИТЬ ЦВЕТ ССЫЛКИ В ТЕКСТЕ ЗАГОЛОВКИ

h2 a, h3 a, h4 a {color: # 50bdb8}

УДАЛИТЬ ПОДЛИНЮ И ИЗМЕНИТЬ ЦВЕТ ССЫЛКИ В ТЕКСТЕ ЗАГОЛОВКИ a, h3 a, h4 902 h4 a {color: # 50bdb8! important; border-bottom-style: none! important;}

ИЗМЕНИТЬ ЦВЕТ ШРИФТА ВСЕХ ССЫЛКИ НА HOVER

h2 a: hover, h3 a: hover, h4 a: hover, pa: hover {color: # 50bdb8 }

Основы CSS: Использование: hover и: active Псевдоклассы ← Alligator.io

CSS предлагает несколько псевдоклассов для стилизации элементов, которые могут помочь различать различные состояния элементов. Здесь мы сосредоточимся на: hover и: active, чтобы увидеть, как улучшить визуальную обратную связь для пользователей и убедиться, что ваш пользовательский интерфейс отлично выглядит на всех устройствах! 🔥

Что такое «Псевдокласс»?

Псевдокласс выбирает состояние селектора в CSS.

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

Наведение курсора на элемент, например кнопку, является одним из примеров изменения состояния элемента в CSS. Состояние «зависания» может быть оформлено иначе, чем состояние по умолчанию без зависания.

Аналогичным образом, щелчок по ссылке обновит состояние ссылки в CSS и сделает ее «активной».

Предоставление пользователям визуальной обратной связи

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

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

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

Псевдокласс: hover

Псевдокласс : hover — один из наиболее распространенных в CSS. Давайте сначала рассмотрим несколько примеров того, как его использовать.

В качестве основы давайте сделаем все теги зеленым цветом.

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

  а {
  цвет: зеленый;
}

a: hover {
  цвет: желтый;
}

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

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

, класса, идентификатора и их комбинации:

  p: hover {
  цвет фона: зеленый;
}

.gator: hover {
  font-weight: жирный;
}

#cayman: hover {
  размер шрифта: 2rem;
}

Вход.gator [type = "text"]: hover {
  граница: сплошной желтый 1px;
}

input.gator [type = "text"]: hover span {
  граница: 2 пикселя сплошного черного цвета;
}

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

Преимущество использования псевдокласса: hover заключается в том, что CSS выполняет всю работу за нас. Извините, JavaScript, но нам здесь не нужны никакие операторы if или управление состоянием! 💪

Использование: hover с разными устройствами

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

Мышь : стиль : hover будет отображаться при использовании мыши и наведении указателя на стилизованный элемент.
Клавиатура : навигация с помощью клавиатуры по странице вызовет , а не , будет запускать стиль : hover , потому что нет события указателя.
Телефоны / сенсорные экраны : Псевдоклассы : hover и : focus часто объединяются, поэтому : hover срабатывает при «щелчке» / касании даже при отсутствии указателя для наведения.

Псевдокласс: active

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

: активный можно использовать для выбора элемента в его «активированном» состоянии. Чаще всего он используется для ссылок и относится к моменту выбора (или нажатия) ссылки. Чтобы увидеть активный стиль, попробуйте щелкнуть ссылку ниже:

Я становлюсь фиолетовым при нажатии

Это достигается путем добавления псевдокласса : active к допустимому селектору CSS.

  а {
  цвет: зеленый;
}

a: hover {
  цвет: желтый;
}

a: active {
  цвет: фиолетовый;
}

Использование: active на разных устройствах

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

Мышь / сенсорные экраны : с помощью мыши или сенсорного экрана активный стиль будет отображаться при выборе элемента (до того, как выбор будет отменен).
Клавиатура : при использовании клавиатуры активный стиль не будет отображаться, если вы выберете элемент с помощью клавиши Enter, потому что он был отправлен при нажатии клавиши.Однако, если вы выбираете элемент (например, кнопку) с помощью пробела, он должен отображать активный стиль, пока вы его не отпустите.

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

В случае псевдоклассов порядок имеет значение. Стиль : hover переопределит стиль : active , поэтому он должен быть объявлен до стиля : active .

Correct Order 🚀

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

Однако, если мы поменяем местами объявления стилей : hover и : active , стиль : hover , к сожалению, переопределит стиль : active .

  а {
  цвет: зеленый;
}

a: active {
  цвет: фиолетовый;
}

a: hover {
  цвет: желтый;
}

Неверный порядок 🙈

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

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

Краткое содержание

При стилизации состояний элементов с помощью : hover и : active , не забудьте:

Используйте эти псевдоклассы для передачи информации об элементах (например, если они интерактивны)
псевдокласс в конце селектора CSS
Помните, как псевдоклассы отображаются на разных устройствах
Убедитесь, что : active идет после : hover в ваших объявлениях CSS

Style hover, focus, и активные состояния по-разному

16 октября 2019
Я стилизовал : hover , : focus и : active таким же образом годами.Не могу вспомнить, когда я начала так укладывать. Вот код, который я всегда использую:
// Не лучший подход. Я объясню почему в этой статье .selector { &: навести, &: фокус, &: active { // Стили здесь } }
По мере того как я уделял больше внимания доступности клавиатуры (и, следовательно, уделял больше внимания фокусировке), я начал думать, что мы не должны одинаково оформлять наведение, фокус и активные состояния.
Наведение, фокус и активное состояние должны иметь разные стили.
Причина проста: это разные государства!
Сегодня я хочу показать вам волшебный способ легко стилизовать все три состояния.
Начнем с : наведите курсор на .
Стилизация состояний при наведении
: hover срабатывает, когда пользователь наводит курсор мыши на элемент.
Состояния наведения обычно представлены изменением цвета фона (и / или цвета ) . Разница в состояниях не должна быть очевидной, потому что пользователи уже знают, что они на что-то ориентируются.
кнопка { цвет фона: #dedede; } button: hover { цвет фона: #aaa; }
Стилизация состояний фокуса
: фокус активируется, когда элемент получает фокус. Элементы могут получать фокус двумя способами:
Когда пользователи переходят в фокусируемый элемент
Когда пользователи нажимают на элемент, на который можно сфокусироваться
Фокусируемые элементы:
Ссылки ( )
Кнопки (
элементов формы ( input , textarea и т. Д.)
Элементы с tabindex
Вот несколько важных моментов, на которые следует обратить внимание:
Пользователи не могут перейти к элементу с tabindex = "- 1" , но они могут щелкнуть по нему. Щелчок вызывает фокус.
В Safari и Firefox (Mac) щелчки не фокусируются на элементе
При нажатии на ссылку ( ) фокус остается на ссылке, пока вы не уберете палец с мыши.Когда вы поднимаете палец, фокус перенаправляется в другое место, если href указывает на действительный id на той же странице.
Чтобы сфокусироваться, мы больше заботимся о том, чтобы пользователи переходили по элементам с помощью табуляции, чем нажимали на них.
Когда пользователь попадает на вкладку, он не знает, на что будет направлен фокус. Им остается только догадываться. Вот почему нам нужно заметно изменить внимание пользователя к сфокусированному элементу .
Стиль фокуса по умолчанию в большинстве случаев подходит.Если вы хотите создать свой собственный фокус, подумайте об этих четырех вещах:
Добавление контура
Создание анимации с движением
Изменение цвета фона
Изменение цвета
Поскольку background-color и color изменения часто сопровождают : hover , имеет смысл, что контуров или анимаций должны сопровождать : focus .
Вы можете использовать комбинацию свойств outline , border и box-shadow для создания приятных стилей фокуса.Я рассказываю, как это сделать, в разделе «Создание собственного стиля фокуса».
кнопка { цвет фона: #dedede; } button: hover { цвет фона: #aaa; } button: focus { наброски: нет; box-shadow: 0 0 0 3px lightskyblue; }
Стилизация активных состояний
Когда вы взаимодействуете с вещами в реальной жизни, вы ожидаете какой-то обратной связи. Например, если вы нажмете кнопку, вы ожидаете, что она будет нажата.
Этот отзыв полезен и для веб-сайтов.Вы можете стилизовать момент «нажатия кнопки» с : активно . : активный триггер срабатывает при взаимодействии с элементом . Здесь взаимодействие означает:
Удерживая левую кнопку мыши на элементе (даже на несфокусируемом)
Удерживая нажатой клавишу пробел (на кнопках)
кнопка: активна { цвет фона: # 333; цвет границы: # 333; цвет: #eee; }
Две странные вещи, на которые следует обратить внимание:
Удерживая нажатой клавишу «Пробел», активирует : активный на кнопках, но удерживание клавиши Enter — нет.
Ввести триггерные ссылки, но не создать активное состояние. Пробел вообще не запускает ссылки.
Стили по умолчанию для ссылок
Ссылки имеют активный стиль по умолчанию. Они становятся красными при нажатии.
Связь между активным и сосредоточенным
Когда вы удерживаете левую кнопку мыши на фокусируемом элементе, вы запускаете активное состояние . Вы также одновременно запускаете состояние фокуса .
Когда вы отпускаете левую кнопку мыши, фокус остается на элементе
👆 верно для большинства элементов, на которые можно сфокусироваться, кроме ссылок и кнопок.
Для ссылок:
Когда вы удерживаете левую кнопку мыши: триггеры : активны и : фокус состояние в Firefox и Chrome Активны только триггеры в Safari (проверено только на Mac)
Когда вы отпускаете левую кнопку мыши: : фокус остается на ссылке (если href ссылки не соответствует id на той же странице).В Safari фокус снова возвращается к .
Для кнопок:
Когда вы удерживаете левую кнопку мыши: триггеры : активные и : фокус состояния только в Chrome. Не запускает : сфокусируйте вообще в Safari и Firefox (Mac). Я писал об этом странном поведении здесь.
Если вы хотите, чтобы клики фокусировались на кнопках, вам нужно добавить этот JavaScript как можно раньше. (Что касается того, почему, вы можете прочитать статью, на которую я ссылался выше, для получения дополнительной информации).
document.addEventListener ('щелчок', событие => { if (event.target.matches ('button')) { event.target.focus () } })
После того, как у вас будет этот код, поведение кнопок при нажатии станет:
Когда вы удерживаете левую кнопку мыши: запускает : активен во всех браузерах. Триггеры : сфокусируйте только на Chrome.
Когда вы отпускаете левую кнопку мыши: Триггеры : фокус на Safari и Firefox (Mac). : фокус остается на кнопке для других браузеров.
Поведение кнопки в Safari после добавления фрагмента кода JavaScript выше.
Теперь вы знаете о состояниях наведения, фокуса и активных состояний, я хочу поговорить о стилизации всех трех.
Волшебное сочетание
Волшебная комбинация позволяет пользователям получать обратную связь, когда они наводят курсор, фокусируются и взаимодействуют с элементом. Вот код, который вам нужен:
. Элемент: парение, .element: active { / * Изменить цвет фона / текста * / } .element: focus { / * Показать схему / * }
Для пользователей мыши:
Когда пользователь наводит курсор на элемент, изменяется background-color (и / или color ).Они получают обратную связь.
Когда пользователь щелкает элемент, отображается контур фокуса. Они получают обратную связь.
Для пользователей клавиатуры:
Когда пользователь входит в элемент, отображается контур фокуса. Они получают обратную связь.
Когда они взаимодействуют с элементом, изменяется background-color (и / или color ). Они получают обратную связь.
Лучшее из обоих миров!
Я не тестировал полностью магическую комбинацию. Это проверка правильности концепции. Буду признателен, если вы поможете мне с тестами и дадите мне знать, как дела.
Если вы запускаете тесты, не используйте Codepen. Состояния фокуса для ссылок на Codepen странные. Если вы наводите курсор на ссылку, контур фокуса удаляется. Почему? Я не знаю. Иногда я думаю, что лучше всего протестировать подобные вещи без каких-либо необычных инструментов. Просто старый HTML, CSS, JS.
Немагическая (но может быть лучше) комбинация
Как я уже упоминал выше, нажатие на кнопки ведет себя странно в Safari и Firefox (Mac).Если вы добавили фрагмент кода JavaScript, который я вам показал, волшебная комбинация все еще работает. Но это не идеально.
Для Safari и Firefox (Mac) происходит следующее:
Когда пользователи удерживают кнопку мыши нажатой, ничего не меняется.
Когда пользователь поднимает кнопку мыши, элемент получает фокус
Если вы думаете, что этого достаточно, то волшебная комбинация работает. Вы можете остановиться здесь.
Но если вы считаете, что аффорданса недостаточно, вам нужно стилизовать : hover , : focus и : active отдельно.
.element: hover { / * Изменить цвет фона / текста * / } .element: active { / * Еще одно изменение цвета фона / текста * / } .element: focus { / * Показать схему / * }
Поведение кнопки в Safari, если вы стилизовали все три состояния.
Вот и все! Надеюсь, вы узнали что-то сегодня!
Если вам понравилась эта статья, расскажите о ней другу! Поделитесь этим в Твиттере.
No related posts.

Потрясающие эффекты CSS3 при наведении

Кнопка, изменяющая свой цвет при наведении на нее курсора

Учебник CSS 3. Статья «Переходные эффекты в CSS»

Установка переходного эффекта

Длительность переходного эффекта

Переходный эффект для отдельных свойств

Задержка перед переходным эффектом

Изменение скорости переходного эффекта

Универсальное свойство transition

Вопросы и задачи по теме

seodon.ru | Учебник HTML — Меняем цвета ссылок

Изменяем цвет отдельных ссылок

Классы Bootstrap 4, изменяющие цвет текста и фона

Классы, изменяющие цвет шрифта

Классы для изменения цвета ссылок

Классы, изменяющие цвет фона

Классы для создания градиентного фона

Псевдоклассы — CSS | MDN

Links ссылки в CSS при наведении. Уроки для начинающих академия

Укладка ссылки

Пример

Пример

Оформление текста

Пример

Цвет фона

Пример

Дополнительные кнопки-ссылки

Пример

Другие примеры

: hover — CSS: каскадные таблицы стилей

Базовый пример

HTML

CSS

Результат

Галерея изображений

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

Внешние ссылки

HTML

Новости

События

Галерея

CSS

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

Мягкая цветная анимация при наведении курсора на ссылку с помощью CSS

CSS Цветовой переход при наведении курсора на ссылку

Как стилизовать гиперссылки с помощью CSS // Squarespace Tutorial — InsideTheSquare.co

Основы CSS: Использование: hover и: active Псевдоклассы ← Alligator.io

Что такое «Псевдокласс»?

Предоставление пользователям визуальной обратной связи

Псевдокласс: hover

Стилизация состояний при наведении

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

Волшебное сочетание

Немагическая (но может быть лучше) комбинация

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