Geek Answers Handbook

Run the CSS transition in one direction but not the other

I use the CSS transition for my hyperlink elements to make their interaction smoother. But I also want immediate feedback when the user is waiting for it. Therefore, I want the new state to appear immediately, but let it disappear when the user leaves.

Here are some CSS I'm using right now:

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;
}
<a href="javascript:void(0)">Test link</a>
Run codeHide result

As you can see, color wilting works when you leave an element with the mouse cursor, but not when you enter it.

When you click on a freezing link, the color changes immediately again.

: , , . , :hover , , .

, , .

:

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

CSS? , JavaScript, .

+6
2

, . , CSS, span, z-index.

2 :

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;
}
<a href="javascript:void(0)"><span>Test link</span></a>
Hide result

:

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;
}
<a href="javascript:void(0)"><span>Test link</span></a>
Hide result
+3

. <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>
Hide result
0

More articles:


All Articles