如何立即更改鼠标悬停的背景？答案

【问题标题】：How do I change the background on mouse over immediately?如何立即更改鼠标悬停的背景？
【发布时间】：2014-02-12 22:10:00
【问题描述】：

我们有一个网站，其中的元素具有背景图像，而它们的父元素具有不同的背景图像。在鼠标悬停 (:hover) 时，背景会变为特定颜色。问题是更改不会立即发生，并且在几分之一秒内背景变得透明并且父背景可见。我想立即进行更改，或者至少使背景从图像更改为特定颜色而不是透明的（如果它不透明，那么我不介意保持效果）。我们如何使用 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;，背景图像也会在鼠标悬停时移动。

【问题讨论】：

CSS: Hover State images cache 的可能重复项
CSS sprites 是您的解决方案。见上面的问题。
@Liam，我们不能使用精灵，因为背景图片是用户上传的，我们不能修改它们。

标签： javascript jquery html css

【解决方案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;

【讨论】：

【解决方案2】：

好的，有一个答案虽然正确，但已被删除。这是有效的 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;
    -webkit-transition: 0s ease-in-out;
    -moz-transition: 0s ease-in-out;
    -o-transition: 0s ease-in-out;
    transition: 0s ease-in-out;
}

.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]);
}

唯一的变化是过渡。

【讨论】：

并且该代码添加了 mozilla、Opera 和 webkit 特定的过渡，但不是 IE 特定的过渡。任何使用 IE9 或更低版本的人都不会看到您的原始问题有任何变化。
这是一个小错误，只会在几分之一秒内发生，所以如果我们能为 Google Chrome 和 FireFox 解决它，那就足够了。

【解决方案3】：

如果你不能使用精灵，我会尝试这样的事情（确切的解决方案我的不同，因为你没有发布你的 HTML）：

我只想改变你的结构

<div class="items_container">
   <span class="thumbnail"></span>
   <span class="hoverThumbnail"></span>
</div>

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:hover .thumbnail {
   display:none;
 }

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

.main_block .items_block .items_container .hoverThumbnail{
    background-image: url([some other url]);
    display:none;
}

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

所以你展示和隐藏不同的元素。这种方式在页面加载时都由浏览器加载。

【讨论】：

【解决方案4】：

尝试在鼠标悬停时更改 css 类名称，而不是更改图像 url。用该类名定义 css

这里是小提琴 jsfiddle.net/mannejkumar/6e89P/

【讨论】：