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');
  })
})

单击时，从下到上填充另一个div内容

1 个答案: