php - WP 字幕 - 格式

Question

不确定这是不是该问的地方，但我在其他地方运气不好，之前经常通过查看其他人在本网站上的问题和答案来设法找到问题的答案。

我最近安装了一个 WordPress 插件 (WP Subtitle)，它允许我为帖子和页面分配一个副标题。但是有几个问题:

以下行是将我的博客文章的标题显示为侧边栏中的链接:

    <a href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?> </a>

我修改了它，所以副标题也显示了:

    <a href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title()+the_subtitle('<span class="subtitle">', '</span class="subtitle">') : the_ID(); ?></a>

链接本身工作正常——但如果鼠标仅悬停在标题上，则只有标题高亮显示，而如果鼠标悬停在副标题上，则标题和副标题都高亮显示(这正是我真正想要的) .请问有人知道我怎么能做到这一点吗？无论用户点击链接的哪一部分，标题和副标题都要突出显示？

第二个问题是代码似乎只适用于我的帖子，根本不显示我页面的副标题。 (尽管这仅在侧边栏中出现——各个页面和帖子都可以很好地显示标题和副标题)。

如果你需要明白我的意思，我的网站是http://www.retelevise.com .任何帮助或建议将不胜感激。

谢谢， SN.

Answer 1

发生了什么

这里的问题是您在 a 中以 span 的形式添加了一层 HTML。您的 CSS :hover 规则仅适用于自身，不适用于子级。因此，当您将鼠标悬停在 a 内的内容上时，只会突出显示 a 内的内容。你可以走两条路。第一个涉及删除额外的 span，您需要保留它以更改颜色。

虽然第二种方法很简单，只涉及额外的一行代码。我们只需要添加另一个选择器来告诉浏览器突出显示所有子 span 以及 a 本身。您当前的 :hover 选择器是 .post-excerpt-title a:hover。我们只需要添加 .post-excerpt-title a:hover span，它就会完美地工作。

---

代码

当前 CSS:(减去注释)

.post-excerpt-title a:hover {
    color: #F29B06;
    font-weight: bold;
}

新的 CSS:

.post-excerpt-title a:hover, .post-excerpt-title a:hover span {
    color: #F29B06;
    font-weight: bold;
}

---

截图