1

我第一次将 HTML/CSS 文件转换为 Wordpress，但我无法弄清楚为什么我主页顶部的两行 h1 标签不会同时显示两行的 :hover 伪类时间。

HTML：

<h1>
    <a href="http://tautcopy.com/dev/new-post-title-3/" rel="bookmark" title="Permanent Link to Creating a  code block using HTML and CSS">Creating a </a>
    <pre>
        <a href="http://tautcopy.com/dev/new-post-title-3/" rel="bookmark" title="Permanent Link to Creating a  code block using HTML and CSS"> code block using HTML and CSS</a>
    </pre>
</h1>

然后我有一个 CSS 规则.post-header h1 a:hover。

我确定这是一个简单的修复，我只是不知道它是什么。谷歌目前没有提供帮助。

4

4 回答 4

3

您的悬停规则应该针对悬停的 h1 内的锚点，而不是直接悬停的锚点（因为您有两个）：

.post-header h1:hover a {
    color: rgb(153, 153, 153);
}

在评论中的讨论之后，我现在意识到您的 HTML 格式不正确。所以它可能不会被解释为每个浏览器中的两个链接。我相信最好的解决办法是保留您当前的 CSS，并解决根本问题。你有一个无与伦比<pre>的锚；它应该是正确的 HTML 编码，<pre>以便被识别为文本，而不是标签：

Creating a &lt;pre&gt; code block using HTML and CSS
于 2013-09-17T23:12:35.437 回答
1

在您的CSS中，您有以下内容

.post-header h1 a:hover {
  color:rgb(153, 153, 153);
}

将其更改为

.post-header h1:hover {
  color:rgb(153, 153, 153);
}

问题是您正在将 应用于:hover元素a，这可能可以正常工作，但由于某种原因，您在标题中的链接被拆分为 2 个不同的元素。我不知道那是故意的还是无意的。

标题是否有可能是，

Creating a <pre>code block using HTML and CSS</pre>

这会导致问题，因为<pre></pre>块没有转义？我不知道 php，但应该有一些函数可以逃避这个，所以在 html 中使用是安全的。这是您需要将 php 输出到文件的内容，以便显示文本<pre>

Creating a &lt;pre&gt;code block using HTML and CSS&lt;/pre&gt;
于 2013-09-17T23:14:14.177 回答
1

改变这个

.post-header h1 a:hover { 
    color: rgb(153, 153, 153);
}

进入这个

.post-header h1:hover {
    color: rgb(153, 153, 153);
 }
于 2013-09-17T23:09:45.237 回答
0

.post-header h1 a:hover工作得很好，这是一个小提琴

.post-header h1 a:hover { 
   color: #555;
}
于 2013-09-17T23:20:56.403 回答