0

我有一个包含几行 HTML 的链接，悬停时它们都应该改变颜色（或其他），但它们只对每行做出反应。

如果我使用 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

知道这怎么可能吗？

谢谢

4

2 回答 2

0

您的实时站点上还有其他样式表，您不包括在 jsfiddle 中。p 级元素有一些样式，因此如果您希望它能够覆盖它，那么您需要执行以下操作：

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

但是，您真的不应该在 a 标签中包含块级元素。您可以将 ps 更改为 span，然后将它们定义为 css 中的块元素，以便在语义上是正确的，或者为什么不一起删除 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; }
于 2013-11-09T13:13:24.430 回答
0

我通过解决它来解决它。我不知道为什么它在 JSfiddle 中起作用，而不是在 wordpress 网站上（但 wordpress 更常见的是这种情况；）。

我将所见即所得编辑器更改为纯文本，因此

标签没有自动返回，这解决了问题。

于 2013-11-09T13:14:05.453 回答