时间戳

首页 > 解决方案 > 在仅使用 CSS 离开页面之前单击链接时如何淡出整个页面？

html - 在仅使用 CSS 离开页面之前单击链接时如何淡出整个页面？

问题描述

单击链接后，我设法淡出页面。但是当链接接收时页面也会淡出:focus（显然）。

我想知道 CSS 是否存在（或即将到来）:active-within或:child-clicked伪事件。

.app:focus-within{transition:opacity 1s ease-in;opacity:0}

您对实现目标有什么好的建议吗？

.app:focus-within{transition:opacity 1s ease-in;opacity:0}
<div style="width:250px;max-width:100%;outline:1px solid #f006;margin:2rem">
<div class="app" style="background:#edf;padding:1em">
<p>Lorem ipsum <a href="#">dolor sit amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>

标签： htmlcss

解决方案

我认为这对于纯 CSS 是不可能的。您的选择可能是：

  • 使用 HTML 并将链接设置tabindex为 -1
  • 使用 JavaScript

第一种选择在不使用 JavaScript 的情况下解决了问题，但同时不利于内容的可访问性。所以最后，JavaScript 可能是最好的工具。

推荐阅读