html - コードの改善に関する推奨事項はありますか? CSSホバー

Question

ホバー時にすべての「見出し」文字の色を個別に変更しようとしています。次のコードでそれを達成しました：

HTMLコード

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

CSSコード

h1{ display:inline-block;
}

h1:hover { color: #FF0000 ;
}

フィドル

したがって、コードは正常に機能しますが、逆効果であり、SEO フレンドリーではないと思います。

より優れた生産的なコードを使用して同じ結果を達成したいのですが、何かヒントはありますか?

score 2 · Accepted Answer

要素を使用<span></span>して個々の文字を 1 つの<h1>タグ内にラップし、で色を変更しhoverます。これははるかに SEO フレンドリーです。

このようなもの：

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

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

score 1 · Accepted Answer

したがってh1、すべての文字に個別にタグを使用することはお勧めできません。CSS を使用しないと、ページ上で次のように表示されるためです。

T
e
s
t

CSS の作業を開始する前に、整形式の HTML を常に準備しておく必要があります。したがって、タグは（タグのように）ではなく、文字にタグを使用spanする方がうまく機能します。spaninlineblockh1

次のようになります。

HTML:

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

CSS:

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

2 に答える 2