2

我的网站有问题。在主页上，我有一张图片。图像顶部是一个 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;
}
4

1 回答 1

1

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

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

类似问题：悬停在父 div 上时触发 css 背景图像位置

于 2013-08-22T11:42:18.370 回答