jquery - 单击从下到上填充另一个 div 内容

Question

我需要做一个功能，当我点击一个元素时，另一个元素的内容会从下到上填充。

我试图通过触发悬停来实现它，因为如果我将鼠标悬停在元素本身上，我可以正常工作

$(document).ready(function(){
    $('.click-me').on('click', function(){
       $('.button-grey').trigger('hover');
  })
})

.button-grey {
    padding: 13px 40px;
    display: inline-block;
    border: 1px solid #969496;
    position: relative;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    background-image: linear-gradient(to top, #fff 50%, #969496 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.button-grey:before {
    content:"";
    z-index:-1;
    position:absolute;
    top:-1px;
    left:0;
    right:0;
    bottom:0;
    background-image: linear-gradient(to top, #969496 50%, transparent 50%);

}

.button-grey,
.button-grey:before {
    background-size: 100% 200%;
    background-position: top;
    transition: background-position 0.5s ease-in-out;
}

.button-grey:hover,
.button-grey:hover:before{
    background-position: bottom;
    cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="click-me">Click me</div>
<div class="button-grey"></div>

所以这个触发器不起作用，我不确定这是否是这样做的方式。 我想要的结果是单击一个元素时其他按钮被填充。 这是我需要的图片 https://ibb.co/3Mq8PzL

Answer 1

您无法真正以这种方式触发悬停。我认为这只会触发它 1 毫秒左右(因为你并没有真正将鼠标悬停在它上面)而且你什么也看不到。

一个解决方案是为此使用一个类并在点击时切换类:

.button-grey_fakehover,
.button-grey_fakehover:before{
    background-position: bottom;
    cursor: pointer;
}

这里我们为一些 button-grey_fakehover 类添加定义(名字完全由你决定)

$(document).ready(function(){
    $('.click-me').on('click', function(){
       $('.button-grey').toggleClass('button-grey_fakehover');
  })
})