CSS悬停，同向过渡效果答案

【问题标题】：CSS hover, transition effect in the same directionCSS悬停，同向过渡效果
【发布时间】：2019-04-10 13:29:57
【问题描述】：

我在悬停时做一些基本的 CSS 填充过渡。我以这个 codepen 为例：https://codepen.io/brandon4117/pen/ihIgE。现在，在悬停时，背景位置会升高以填充 div，而在悬停时，背景会下降。我想知道如何修改这支笔，例如当悬停在过渡上时应该向上而不是向下。

大多数悬停过渡：悬停在新填充顶部->底部。将鼠标悬停在新填充上会移除底部->顶部。我想做悬停填充顶部->底部，悬停填充再次删除顶部->底部。

查看使用的 CSS：

div {border-style: solid;
border-color: black;
color: black;
padding: 50px;
background-size: 200% 200%;
background-image: 
linear-gradient(to top, #A72424 50%, transparent 50%);
background-position:0 100%;
-webkit-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-moz-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-ms-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-o-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
transition: background-position 300ms, color 300ms ease, border-color 300ms ease;

}

div:hover {color: white;
border-color: #A72424;
background-image: 
linear-gradient(to top, #A72424 50%, transparent 50%);
background-position: 0 0%;
-webkit-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-moz-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-ms-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-o-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
}

a {color: black; text-decoration: none;
transition: all 100ms linear;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;}

a:hover {color: white;
transition: all 100ms linear;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
}

a:active {color: white;}

谢谢

【问题讨论】：

首先玩linear-gradient...你应该先自己尝试一下——这就是SO的工作原理。你展示你做了什么，人们帮助你改进你的工作。祝你好运
感谢您的回复，我的问题是有两种状态：1）悬停时我有一些背景位置和原始背景位置，这是我们的控件在悬停时默认设置的位置.如何使过渡与悬停时的填充方向相同？
transition 没有像animation 那样的 reverse 值，因此要实现这种过渡效果，您需要将其与脚本结合使用，或者使用animation
可能会有一些选项使用一些额外的子元素或伪元素。
也看看这个：w3schools.com/w3css/w3css_animate.asp 他们有一些很酷的东西，很容易实现。它可能不是您正在寻找的东西，但仍然......

标签： css html css-transitions

【解决方案1】：

好的，我得到了答案：自上而下执行此操作：

.divclass::after {
    position: absolute;
    transition: 0.3s;
    content: '';
    height: 0;
    top: 50%;
    right: 0;
    width: 3px;
    background: #fff;
    bottom: 0;
    top: auto;
    z-index: -1;
    width: 120%;
}



.divclass:hover::after {
    height: 100%;
    top: 0;
}

感谢您为我指明伪 Frderico 的方向

【讨论】：

在问题和答案中提供适当的代码示例，解释并显示，使用工作代码 sn-p，一切正常，与现有的一样，很难看出它是如何工作的可以。