我只是想创建一个过渡示例 :target。定位有效，但转换无效(这只是为了更改背景颜色)。有人可以告诉我我做错了什么吗？谢谢。
<!DOCTYPE html>
<html>
<head>
<style>
#news1 {
background-color: white;
-webkit-transition: background-color, 2s, ease, .1s;
-moz-transition: background-color, 2s, ease, .1s;
-o-transition: background-color, 2s, ease, .1s;
-ms-transition: background-color, 2s, ease, .1s;
transition: background-color, 2s, ease, .1s;
}
#news2 {
background-color: white;
-webkit-transition: background-color, 2s, ease, .1s;
-moz-transition: background-color, 2s, ease, .1s;
-o-transition: background-color, 2s, ease, .1s;
-ms-transition: background-color, 2s, ease, .1s;
transition: background-color, 2s, ease, .1s;
}
#news1:target {
border: 2px solid #FF0000;
background-color: #e5eecc;
}
#news2:target {
border: 2px solid #FF0000;
background-color: #e5eecc;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>
<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>
<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>
</body>
</html>
最佳答案
从transition中移除,
transition: background-color, 2s, ease, .1s;
应该是
transition: background-color 2s ease .1s;
您可以为目标添加 border: 2px solid transparent; 边框，这样它们就不会移动
关于html - 转换不适用于 :target, 不确定我做错了什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26869714/