Матвей Земсков

Заметки веб-мастера

Вторник, 22 апреля 2014 22:21

Изменяем псевдоэлемент :after с помощью jQuery

Оцените материал
(4 голосов)

Взаимодействовать с псевдоэлементами на странице не так просто, как с обычными HTML-элементами. До них невозможно «добраться» при помощи jQuery, а при необходимости изменить их содержимое приходиться делать различные трюки. Недавно мне понадобилось изменить фон псевдоэлемента :after. Сейчас я поделюсь с вами информацией о том, как это можно сделать.

У нас есть страничка с одним HTML-элементом (для наглядности) - заголовком h1. Внутри него находится ссылка.

HTML

<!DOCTYPE HTML>
  <html lang="ru">
  <head>
	<meta charset="utf-8" />
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<style>
		h1{
			color:#f2b940;
			font-size:1.5em;
			font-family: Verdana, sans-serif;
			margin:10px 0 0 10px;
			cursor: pointer;
		}		
		.test{
			border-bottom: 1px dotted #323694;
			color: #323694;
			cursor: pointer;
			font-weight: normal;
			position: relative;
			text-decoration: none;
		}			
		.test:after{
			background: url("arrow-blue.png") no-repeat;
			background-position: 100% -10px;
			content: "";
			display: block;
			height: 5px;			
			position: absolute;
			right: -17px;
			top: 50%;
			width: 10px;
		}	
	</style>
</head>
<body>
	<h1>Lorem ipsum dolor sit amet, consectetur <a href="#" class="test">adipiscing elit</a></h1>
</body>
</html>

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

Изображение стрелочки является фоном псевдоэлемента :after ссылки. Как же сделать так, чтобы все работало, как я описал?

Если добавить следующий код, то это НЕ СРАБОТАЕТ.

JavaScript

$('a.test:after').css('background', 'url(arrow.png) no-repeat 0 -50px');

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

CSS

.test, .test2{
	border-bottom: 1px dotted #323694;
	color: #323694;
	cursor: pointer;
	font-weight: normal;
	position: relative;
	text-decoration: none;
}	
.test:after, .test2:after{
	background: url("arrow-blue.png") no-repeat;
	background-position: 100% -10px;
	content: "";
	display: block;
	height: 5px;			
	position: absolute;
	right: -17px;
	top: 50%;
	width: 10px;
}		
.test2:after{background-position: 100% 0px;}

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

Последний штрих: пара строчек jQuery и задача рещена.

HTML

<script>
	$(function(){
		$('a.test').click(function(event){
			$(this).removeClass('test').addClass('test2');
			event.preventDefault();
		});		
	});		
</script>

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

Демо-страничка с примером из заметки.

Прочитано 11767 раз

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


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: