Рекомендация по улучшению моего кода? CSS Hover

Question

Я пытаюсь сделать каждую букву «заголовок» меняющейся цветом независимо при зависании. Я достиг этого с помощью следующего кода:

HTML код

<h1>T</h1><h1>e</h1><h1>s</h1><h1>t</h1> 

CSS КОД

h1{ display:inline-block; 
} 

h1:hover { color: #FF0000 ; 
} 

FIDDLE

http://jsfiddle.net/JRfFz/

Так что код работает нормально, но это просто контр- продуктивный, и я не думаю, что SEO-Friendly.

Я хочу добиться того же результата, используя лучший и продуктивный код, любые подсказки?

Answer 1

Используйте <span></span> элементы для обертывания каждой отдельной буквы внутри одного тега <h1>, а затем пусть они меняют цвет на hover. Это гораздо более дружелюбный к SEO.

что-то вроде этого:

h1 { 
    /* no code required, style it however you want */ 
} 

h1 > span:hover { 
    color: #FF0000; 
} 

JSFiddle: http://jsfiddle.net/JRfFz/2/

Answer 2

Таким образом, используя h1 теги для всех букв в отдельности не является хорошей идеей, потому что без CSS, это будет выглядеть, как это на странице:

T 
e 
s 
t 

Перед началом работы с CSS вы должны всегда иметь хорошо сформированный HTML-код; таким образом, используя span теги для букв будут работать лучше, потому что span теги: inline, а не block (например, теги h1).

Он должен выглядеть следующим образом:

HTML:

<h1><span>T</span><span>e</span><span>s</span><span>t</span></h1> 

CSS:

h1 > span:hover { 
    color: #f00; 
    }