Question

我对编码很新（几周前用html和css开始免费）。对于新闻页面，我尝试实现“阅读”链接，类似于此问题：on click hide this (button link) pure css

然而，我似乎无法使链接在点击后消失。到目前为止，我为我的代码得到了这个（打开和关闭工作正常）：

.readmore {
  display: none;
}

article[id*="n"]:target .readmore {
  display: block;
}

article:target .used {
  display: none;
}

<article>Text visible after you open the site.


  <a href="#n2" class="used">Link that opens more text and should diappear after clicking</a>

  <article id="n2">
    <div class="readmore">more text
     <a href="#back">Closing button</a>
    </div>
  </article>
</article>

我觉得我搞砸了很多时间，但我真的无法弄明白。

Answer 1

只需将您的链接放在文章标记内，包括您的ID。

＆＃13;

.readmore {
  display: none;
}

article[id*="n"]:target .readmore {
  display: block;
}

article[id*="n"]:target .used {
  display: none;
}

＆＃13;

<article>Text visible after you open the site.

  <article id="n2">
    <a href="#n2" class="used">Link that opens more text and should diappear after clicking</a>
    <div class="readmore">more text
      <a href="#back">Closing button</a>
    </div>
  </article>
</article>

＆＃13;

Answer 2

使用这个你可以实现你想要的.....你已经添加了id内部文章，你必须给父母artical并改变css

.readmore {
  display: none;
}

#n2:target .readmore {
  display: block;
}

#n2:target .used {
  display: none;
}

.readmore {
  display: none;
}

#n2:target .readmore {
  display: block;
}

#n2:target .used {
  display: none;
}

<article id="n2">Text visible after you open the site.


  <a href="#n2" class="used">Link that opens more text and should diappear after clicking</a>

  <article>
    <div class="readmore">more text
     <a href="#back">Closing button</a>
    </div>
  </article>
</article>

仅在点击css上隐藏链接

2 个答案: