Как сделать, чтобы при клике показывался полностью телефон?

Question

[SergeyVladimirovich9393]

Добрый день!

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

<a class="phone" href="tel:[phone]">[phone]</a>

.phone {
	overflow: hidden;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,0,0,0) 100%);
}
.phone:active {
	color: inherit;
}

Comments

[Дмитрий Беляев]

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

Answer 1

[imko]

Не нужен здесь скрипт https://codepen.io/herr-imko/pen/MWzrNee