html - 悬停时从渐变背景过渡到非渐变背景

标签 html css

我正在使用渐变来设置一个元素的背景颜色。问题是,我也有一个“hover”背景,但没有使用渐变。目前,当我将鼠标悬停在具有 .tinted 类的元素上时,它会闪烁,因为它首先不显示背景,然后应用 rgba(0,0,0,0.65) 有什么方法可以直接从背景过渡:gradient(left, rgba(0,0,0,0.65), rgba(0,0,0,0.30)) rgba(0,0,0,0.65) ?

.tinted {
    transition: background-color 500ms linear;
    background: -webkit-linear-gradient(left, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background: -o-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background: -moz-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background: linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.30));
}

.tinted:hover {
    background: rgba(0, 0, 0, 0.65);
}

最佳答案

您需要使用background-image 定义gradients,使用background-color 定义plain color:

.tinted {
    transition: background-color 500ms linear;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background-image: -o-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background-image: -moz-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
    background-image: linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.30));
}

.tinted:hover {
    background-color: rgba(0, 0, 0, 0.65);
}

DEMO

关于html - 悬停时从渐变背景过渡到非渐变背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31459726/

相关文章:

javascript - 如果没有庞大的 JavaScript 库,如何创建 Netflix 风格的 iframe 覆盖?

html - 如何最小化 <input type ="text"/> 的大小(包括宽度和高度)?

css - 使用 ZopfliPNG 自动优化 CSS 文件(数据 URI)中的 PNG

html - 不以任何方式修改 HTML 的命令行 HTML 格式化程序,只是缩进?

javascript - 函数内的单个函数不会触发,而其他函数会触发

javascript - 单页网站上的 Bootstrap 切换菜单在单击时不会展开

html - 避免滤镜模糊导致关闭的 DIV 元素模糊

javascript - 在html的select标签中调用javascript函数?

javascript - 使用 jQuery Tablesorter 2.0 插件时如何禁用 thead 上的点击触发器?

javascript - 动态更改使用 Polymer 构建的应用程序样式的最佳方法是什么?