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

Псевдокласс :hover (от англ. hover – зависать, зависание) позволяет выбрать элемент требуемого типа, на который наведен курсор мыши, например, span:hover {блок объявлений}.

Синтаксис

<селектор>:hover {блок объявлений}

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/selectors-4/#the-hover-pseudo

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/:hover

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		
		p:hover{
		color: green;			 
		}		
		
		p a:hover{
		color: orange;			 
		}
		
	</style>
	
</head>
<body>

	<p>
		Текст абзаца становится красным	при наведении 
		на него курсора мыши.
	</p>

	<p>	
		А эта <a href="#id">ссылка</a> при наведении 
		на нее курсора мыши становится оранжевой.  
	</p>
	
</body>
</html>

Пример №1