实现按钮Hover时从头播放GIF，移出Hover恢复原背景

核心问题在于浏览器会缓存GIF并持续播放，仅通过CSS切换背景无法重置播放状态。需要结合JavaScript动态控制GIF的加载，强制每次悬停时从头播放。

步骤1：修改HTML/PHP，给按钮添加唯一ID #

方便JavaScript精准获取元素：

<?php
session_start();
if (isset($_SESSION["user_id"])) {
    echo '<a href="../logout.php" class="gradient-button" id="authButton">LOGOUT</a>';
} else {
    echo '<a href="../login.php" class="gradient-button" id="authButton">LOGIN</a>';
}
?>

步骤2：调整CSS样式 #

移除原hover状态下的GIF背景设置，保留其他交互样式：

.gradient-button {
    /* 文本样式 */
    color: white;
    font-size: 20px;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    position: relative;
    overflow: hidden;

    /* 默认背景 */
    background: #282828;

    /* 阴影效果 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    /* 过渡动画 */
    transition: all 0.3s ease;
    cursor: pointer;
}

.gradient-button:hover {
    /* 悬停抬起效果 */
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.gradient-button:hover::before {
    opacity: 0; /* 移除悬停时的遮罩层 */
}

步骤3：添加JavaScript控制逻辑 #

通过监听鼠标事件，动态修改背景图URL（添加随机参数强制重新加载GIF）：

const authButton = document.getElementById('authButton');
const baseGifUrl = './gifs/nastronke.gif';

// 鼠标悬停时加载新的GIF实例（从头播放）
authButton.addEventListener('mouseenter', () => {
    // 添加时间戳参数，让浏览器认为是新资源，强制重新加载
    const freshGifUrl = `${baseGifUrl}?t=${Date.now()}`;
    authButton.style.background = `url(${freshGifUrl}) no-repeat center center`;
    authButton.style.backgroundSize = 'cover';
});

// 鼠标移出时恢复默认背景
authButton.addEventListener('mouseleave', () => {
    authButton.style.background = '#282828';
});

额外注意事项 #

• 确保你的GIF本身设置为播放一次即停止（可通过GIF编辑工具将循环次数改为1），否则即使重新加载，GIF仍会循环播放。
• background-size: cover是标准CSS属性，替换原代码中的fill（非标准值），保证背景图适配按钮尺寸。

内容的提问来源于stack exchange，提问作者PoprostuIzI