Hover-эффект для каждой буквы

Т.к. каждый символ в строке заменяется на <span>символ</span>, то она не может содержать какие-либо html коды.

Пример:

Hover-эффект

для каждой буквы

HTML:

<div class="hover-letter">Hover-эффект</div>
<div class="hover-letter">для каждой буквы</div>

1 2	<div class="hover-letter">Hover-эффект</div> <div class="hover-letter">для каждой буквы</div>

CSS:

.hover-letter {
	position: relative;
	text-align: center;
}
.hover-letter span {
	color: #337AB7;
    font-family: 'Roboto', sans-serif;
	font-size: 44px;
	line-height: 1.2;
	font-weight: bold;
	transition: all 0.3s ease-in-out;
	text-shadow: 0 0 4px rgba(0,0,0, 0.2); 
	position: relative;
	text-transform: uppercase;
	top: 0px;
	left: 0px;
	cursor: default;
	z-index: 1; 
}
.hover-letter span:hover {
	text-shadow: -8px 8px 0 rgba(0,0,0, 0.2); 
	color: #000;
	top: -8px;
	left: 8px;
	z-index: 2; 
}
@media screen and (max-width: 767px) {
	.hover-letter span {
        font-size: 28px;
    }
}

.hover-letter {

position: relative;

text-align: center;

}

.hover-letter span {

color: #337AB7;

font-family: 'Roboto', sans-serif;

font-size: 44px;

line-height: 1.2;

font-weight: bold;

transition: all 0.3s ease-in-out;

text-shadow: 0 0 4px rgba(0,0,0, 0.2);

position: relative;

text-transform: uppercase;

top: 0px;

left: 0px;

cursor: default;

z-index: 1;

}

.hover-letter span:hover {

text-shadow: -8px 8px 0 rgba(0,0,0, 0.2);

color: #000;

top: -8px;

left: 8px;

z-index: 2;

}

@media screen and (max-width: 767px) {

.hover-letter span {

font-size: 28px;

}

JS:

let hover = document.getElementsByClassName('hover-letter');
for (let i=0; i<hover.length; i++) {
	hover[i].innerHTML = hover[i].innerHTML.replace(/(.)/g, '<span>$1</span>');
}

let hover = document.getElementsByClassName('hover-letter');

for (let i=0; i<hover.length; i++) {

hover[i].innerHTML = hover[i].innerHTML.replace(/(.)/g, '<span>$1</span>');

}

Пример:

HTML:

CSS:

JS:

Смотрите также:

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