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

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

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;

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

唯一的变化是过渡。

Answer 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;
}

所以你展示和隐藏不同的元素。这样，当页面加载时，浏览器都会加载它们。

Answer 4

尝试在鼠标上更改css类名，而不是更改图像网址。使用该类名定义css

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

如何立即更改鼠标背景？

4 个答案:

CSS