javascript - 如何判断一篇博文是否被选中？

Question

我正在使用 Tumblr 博客模板，我需要在其中区分处于折叠和展开状态的博客文章/帖子。具体来说，我正在尝试应用一个 CSS 属性(用于边框)，该属性必须仅在博客文章以折叠状态显示在网格中时应用，而在访问者选择博客以进一步阅读时不得应用。

这是我对模板所做的更改:

    div.posts-holder article:hover
    {
        border: 1px #BDBDBD solid;
        box-shadow: 7px 7px 3px #D8D8D8;
    }

此外，这就是 div.posts-holder 的样子(不是完整的代码，只是给出一个想法的片段)

<section class="the-posts">

    <div class="posts-holder
    {block:IndexPage} posts-grid{/block:IndexPage}">


        {block:IndexPage}<div class="grid-sizer"></div>{/block:IndexPage}


        {block:Posts}

        <article id="{PostID}" class="type_{PostType} {TagsAsClasses}" rel="{ReblogURL}">

            <div class="article-content">

这是我为说明问题而创建的虚拟博客的链接: Example Blog Link 悬停时观察，每篇博文都有一个阴影边框。一旦我真正阅读其中一篇文章，我就不需要这个了。

我如何使用 JavaScript 或任何其他技术来做到这一点？我可以通过某种方式查找帖子的状态吗？

Answer 1

通过查看您的示例页面，posts-holder div 在网格页面上也有一个 posts-grid 类，但它不在页面上只显示一篇文章。所以你只需要改变你的 CSS 悬停规则从

div.posts-holder article:hover

到

div.posts-holder.posts-grid article:hover

这样它只会应用于处于网格中的文章。