Question

我只是想创建一个过渡的样本：目标。定位有效，但转换不是（只是为了改变背景颜色）。有人可以告诉我我做错了什么吗？感谢。

<!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>

Answer 1

从,

中删除transition

transition: background-color, 2s, ease, .1s;

应该是

transition: background-color 2s ease .1s;

您可以为目标添加border: 2px solid transparent;边框，以便它们不会移动

演示 - http://jsfiddle.net/wzgnqpsq/1/

过渡不合作：目标，不确定我做错了什么

1 个答案: