Question

我在我的超链接元素上使用CSS转换，使其交互显得更流畅。但是，当用户等待它时，我也想要立即反馈。因此，我希望新状态立即显示，但当用户离开时让它淡出。

这是我目前正在使用的一些CSS：

＆＃13;

a
{
  display: inline-block;
  padding: 20px;
  background: #eeeeee;
  color: black;
  text-decoration: none;
  transition: background 1s;
}
a:hover
{
  background: #bbbbbb;
  transition: background 0s;
}
a:active
{
  background: #888888;
  transition: background 0s;
}

＆＃13;

<a href="javascript:void(0)">Test link</a>

＆＃13;

正如您所看到的，当使用鼠标光标离开元素时，颜色淡化有效，但在输入时则不然。

在悬停链接上按下鼠标按钮时，颜色会立即再次变化。

现在出现了一个有趣的部分：当鼠标按钮被释放时，我希望颜色能够淡出回到悬停状态。但是我无法设法这样做，因为:hover州并不知道它来自哪个州的方向，并且总是禁用过渡。

无论发生什么变化，首次悬停链接时都不能有转换。

再次在一个简单的状态图中：

State:          normal   <---------->   hover   <---------->   active
Transition:             yes         no         yes?        no
                                          (currently no)

CSS可以实现吗？我知道我可以添加自定义JavaScript，但需要使用大量元素。

Answer 1

一个想法是使用伪元素来创建你的背景，你可以轻松地创建你想要的效果。缺点是您将拥有更多CSS，并且必须在ImageWithText randomItem = images[random.Next(images.Count)]; pictureBox1.Image = randomItem.Image; button1.Text = randomItem.Text; button2.Text = randomItem.Text; button3.Text = randomItem.Text; button4.Text = randomItem.Text;中添加内容才能正确设置span值。

使用2个伪元素：

＆＃13;

z-index

＆＃13;

a {
  display: inline-block;
  padding: 20px;
  background: #eeeeee;
  color: black;
  text-decoration: none;
  transition: background 1s;
  position: relative;
}

a span {
  position: relative;
  z-index: 3;
}

a:before,
a:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent;
  z-index: 1;
  transition: background 1s;
}

a:after {
  z-index: 2;
}

a:hover::before {
  background: red;
  transition: background 0s;
}

a:active::after {
  background: blue;
  transition: background 0s;
}

＆＃13;

仅使用一个伪元素：

＆＃13;

<a href="javascript:void(0)"><span>Test link</span></a>

＆＃13;

a {
  display: inline-block;
  padding: 20px;
  background: #eeeeee;
  color: black;
  text-decoration: none;
  transition: background 1s;
  position: relative;
}

a span {
  position: relative;
  z-index: 1;
}

a:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent;
  z-index: 0;
  transition: background 1s;
}

a:hover {
  background: red;
  transition: background 0s;
}

a:active::before {
  background: blue;
  transition: background 0s;
}

＆＃13;

Answer 2

这是我根据Temani Afif的回答所做的。它不需要链接中的额外<span>，而是需要额外的data-text属性，它只适用于纯文本内容（没有图像等）。

该示例有两个测试链接，一个带有属性，一个没有属性，以显示基本上我在问题中所具有的回退行为。

不确定哪个“更好”。这可能取决于具体情况。我只是想添加这个解决方案。

a
{
  display: inline-block;
  padding: 20px;
  background: #eeeeee;
  color: black;
  text-decoration: none;
  transition: background 1s;
  position: relative;
}

a:hover
{
  background: red;
  transition: background 0s;
}

a[data-text]::before
{
  content: attr(data-text);
  color: transparent;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: transparent;
  transition: background 1s, color 1s;
}

a[data-text]:active::before,
a:not([data-text]):active
{
  color: white;
  background: blue;
  transition: background 0s;
}

<a href="javascript:void(0)" data-text="Test link">Test link</a>

<a href="javascript:void(0)">Test link</a>

在一个方向上运行CSS转换而不在另一个方向上运行

2 个答案: