javascript - 如何立即更改鼠标悬停时的背景？

Question

我们有一个网站，其中的元素有背景图片，而它们的父元素有不同的背景图片。在鼠标悬停(:悬停)时，背景会更改为特定颜色。问题是变化不会立即发生，并且在几分之一秒内背景变得透明并且父背景可见。我想让更改立即发生，或者至少使背景从图像更改为特定颜色而不透明(如果它不透明，那么我不介意保留效果)。我们如何使用 CSS 来实现(我更喜欢不用 JavaScript)？

这是我们的 CSS 代码:

.main_block .items_block .items_container .thumbnail {
    border: 1px solid #cdced0;
    border-radius: 3px;
    padding: 5px 3px 10px;
    float: left;
    background-size: cover;
    background-position: center center;
}

.main_block .items_block .items_container .thumbnail:hover,
.main_block .items_block .items_container .thumbnail.active_thumbnail {
    border: 1px solid #FCC20F !important;
    background: #F9F158 !important;
    background-size: cover !important;
    background-position: center center !important;
}

.main_block .items_block .items_container .thumbnail {
    background-image: url([some url]);
}

顺便说一句，如果没有 .thumbnail:hover 中的 background-position: center center !important;，背景图像也会在鼠标悬停时移动。

Answer 1

如果图像不透明，您可以尝试:

常规状态:

background: url("[some url]") no-repeat scroll 0 0 #F9F158;

悬停:

background: url("[some url]") no-repeat scroll -9999 -9999 #F9F158;

所以这基本上只是将不透明的图像移出视野以显示悬停时的背景颜色。

如果它确实使用透明度，您也可以尝试将整个事情视为恶意并使用相同的基本技术首先显示您的图像:

background: url("[some url]") no-repeat scroll 0 0 transparent;

然后在悬停时移动到同一图形内的平面色域:

background: url("[some url]") no-repeat scroll 100 0 transparent;