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

Posted 2023-05-08

【中文标题】如何通过将鼠标悬停在同一页面上的图像上来触发 CSS 动画按钮

【英文标题】：How to trigger a css animated button by hovering over an image on the same page

【发布时间】：2013-08-25 01:17:58

【问题描述】：

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

【问题讨论】：

提供css目前是如何完成的，并提供HTML的重要部分，以及plz

嗨，阿里，谢谢！我刚刚用我的 html 和 css 更新了它

【参考方案1】：

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

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

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