Как в css применить стиль или в js выполнить функцию по наведению курсора на текст (а не на блок с ним)?

Question

[BanterFace]

Есть div с буквой H внутри, и как мне применить стиль\выполнить функцию по наведению курсора не на сам div (который больше), а именно на саму букву?

Comments

[Иван]

код хде? По картинке не гадаем.

[BanterFace]

Иван, а зачем? Ну допустим
<div>H</div>
и как тебе это помогло?

[Smeecy Smeecy]

Эмм , а какой стиль Вы хотите применить?

[BanterFace]

Smeecy Smeecy, эээ ну допустим
color: #000;

[Smeecy Smeecy]

Глеб Сердюков, Например, так

[BanterFace]

Smeecy Smeecy, но стоит поставить большой размер, как мы видим всё то же поведение:

[Smeecy Smeecy]

Глеб Сердюков, Насколько я знаю это уже специфика веб-шрифтов.

Answer 1

[Алексей Кондаков]

div:nth-child(1), либо div:first-child пробовали?

Comments

[BanterFace]

Не пробовал, сейчас попробовал, желаемого эффекта не дало (а должно было?)

[Алексей Кондаков]

Глеб Сердюков, https://jsfiddle.net/tez0oxp4/

[BanterFace]

(увеличил в 10 раз и поменял ховер-цвет)

[Иван]

Глеб Сердюков, Когда увеличиваете font-size,то и увеличивается и line-height. Разные шрифты с одинаковым размером,могут иметь разный размер(это вопрос по типографии), то что вы увеличили размер,так тут тоже увеличился line-heignt, вот именно на него вы наводите курсор и из-за этого меняется цвет.

[BanterFace]

Иван, если вы имели ввиду установку "line-height: 0" как решение, то это не работает. А вообще, я думаю что решение находится где-то в области svg, но это не точно.