css - 链接中的多行应该在悬停时同时起作用，但它们不会

Question

我有一个包含几行 HTML 的链接，悬停时它们都应该改变颜色(或其他颜色)，但它们只会对每行使用react。

如果我使用 JSfiddle 并粘贴代码，它可以工作，但在我的 wordpress 网站上它不再工作......

http://jsfiddle.net/6QgAR/

HTML

<div id="homelink"><a href="http://www.google.com"><p style="text-align: center;">    <em>Lorum Ipsum</em><br>
Lorum Ipsum</p>
<p style="text-align: center;">Lorum Ipsum</p>
<p style="text-align: center;">Lorum Ipsum<br>
Lorum Ipsum</p>
</a></div>

CSS

#homelink:hover a{
    color:#ff6600;
    text-decoration:none;
}

直播:http://goo.gl/xU0iFz

知道这是怎么可能的吗？

谢谢

Answer 1

您的实时网站上还有其他样式表，您没有将它们包含在 jsfiddle 中。 p 级元素有一些样式，所以如果你想让它覆盖它，那么你需要做:

#homelink:hover a p {
color:#ff6600;
text-decoration:none;
}

但是，您真的不应该在 a 标签中包含 block 级元素。您可以将 ps 更改为 span，然后将它们定义为 css 中的 block 元素，以便语义正确，或者为什么不一起删除 a 元素并从 div 链接？，例如

<div id="homelink" onclick="window.location='http://google.com';">
  <p><em>Lorum Ipsum</em><br>
    Lorum Ipsum</p>
   <p>Lorum Ipsum</p>
   <p>Lorum Ipsum<br>
    Lorum Ipsum</p>
</div>

并将您的样式保留在 css 表中，例如:

 #homelink p { text-align: center }
 #homelink:hover { color:#ff6600; text-decoration:none; }