html - 淡出前一个 :target after :target changed

Question

我有一个 div，我希望使用 css 显示为 :target。到目前为止，这工作正常。我的问题是:我希望它淡入淡出。

我的代码:

<div id="stuff">
Content
</div>

#stuff {
    opacity:0;
    transition: opacity .5s ease-in-out;
}

#stuff:target {
    opacity:1;
}

那么假设在下面的 url 上它应该淡入(它做了什么):

example.com/example.htm#stuff

但是当我将 url 更改为以下内容(或其他任何内容)时，它会在没有转换的情况下变得不可见:

example.com/example.htm#

请注意，我想通过单击链接来更改 url，而不是通过 JavaScript 修改它。

我的问题是:

是否可以在不使用 JavaScript 的情况下将目标更改为先前的目标时进行转换？你将如何完成它？

如果可能的话，我根本不想使用任何 JavaScript。

Answer 1

我刚刚更改了 opacity 属性的值并且它正在工作。据我所知，opacity 只接受 0 到 1 之间的十进制值(除了 inherit、initial 和 unset).

#stuff {
    opacity:0;
    transition: opacity .5s ease-in-out;
}

#stuff:target {
    opacity:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stuff">
Content
</div>
<a href="#stuff">Add hash</a>
<a href="#">Remove hash</a>