javascript - 如何通过将鼠标悬停在同一页面上的图像上来触发 css 动画按钮

Question

我的网站出现问题。在主页上我有一张图片。图像顶部是一个 css 动画按钮，它会在按钮滑过时进行动画处理。

我需要做的是图像和按钮的翻转，它会触发动画。目前只有在滚动实际按钮时才会设置动画。

动画是纯粹的 css，但我假设我必须使用 Javascript 来触发它，但我不确定如何编写它。

下面是我的html:

<span class="overlay"></span> - (this is the image)
<span class="button-hover" data-text="@item.Name"><span>@item.Name</span></span> -   (this is the button)

这是我的CSS:

.home #primary-nav li a span.overlay {
    position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%;
    background-color: rgba(12, 133, 191, 0.3); opacity: 0;  
}

*, :before, :after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.button,
[class*="button-"] {
    z-index:3;
    margin:0 -15px 0 -15px;
    position: absolute;
    font-family: 'Alright Sans', 'Trebuchet MS', Arial, sans-serif;
    font-size: 2.4em;
    font-weight:600; 
    text-transform: uppercase;
    overflow: hidden;
    line-height:0.8; 
    padding: 5px 5px 5px 5px;
    height: 33px;
    color: #fff;
    background-color: rgba(0,173,239,0.7);
    -webkit-transition: 0.35s ease all;
    -moz-transition: 0.35s ease all;
    -o-transition: 0.35s ease all;
    transition: 0.35s ease all;
}

.button-hover:hover
{
    line-height: 9em;
}

.button-hover:before {
    font-family: 'Alright Sans', 'Trebuchet MS', Arial, sans-serif; text-transform:       uppercase;
    content: attr(data-text);
    color: #DEEFF5;
    position: absolute;
    top: -3.99em;
}

Answer 1

我不知道我是否做对了，但是...尝试将这行代码添加到您的 css 中

.overlay:hover .button-hover{
   line-height: 9em;
}

类似问题:Trigger css background image position when hovering over parent div