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 回答