html - 关于改进我的代码的建议？CSS 悬停

Question

我试图让每个“标题”字母在悬停时独立改变颜色。我使用以下代码实现了它：

代码

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

CSS 代码

h1{ display:inline-block;
}

h1:hover { color: #FF0000 ;
}

小提琴

http://jsfiddle.net/JRfFz/

所以代码工作正常，但它只会适得其反，我猜这不是 SEO 友好的。

我想使用更好、更高效的代码来实现相同的结果，有什么提示吗？

Answer 1

Use <span></span> elements to wrap each individual letter inside of a single <h1> tag, and then have them change color on hover. This is much more SEO friendly.

something like this:

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;
    }