Question

我有这些div具有相同的类和相同的css设计包含图片

<div class="it2" style="background: url(../images/ian.png) no-repeat top center;"></div>

<div class="it2" style="background: url(../images/top.png) no-repeat top center;"></div>

<div class="it2" style="background: url(../images/ylle.png) no-repeat top center;"></div>

我想要做的是当我将鼠标悬停在其中一个div上时背景将变为红色而不覆盖图片

任何可能的想法？

我尝试在css中添加：

.it2:hover { background-color:red;}

但它不起作用

Answer 1

我认为代码snippit中的拼写错误只是在帖子中，而不是在实际代码中？

假设您的实际css文件具有'background-color'而不是'hacground-color'作为属性名称，是您的所有CSS内联，还是某些单独的样式表？内联CSS总是会过度规则化样式表（这是从样式表中的所有内容开始的优势之一 - 当需要进行更改时，还有更多的工作空间。

您的png是否具有透明度，是否使用支持该功能的浏览器？如果没有，背景颜色将在图像后面，因此您将看不到更改。

如果您的网站需要使用无法正确渲染透明度的浏览器，则可能需要使用两个背景图像（唯一的区别是图像的背景颜色）并使用CSS在它们之间切换。 / p>

Answer 2

试试这个：

.it2:hover
{
    background:url() no-repeat top center;
    background-color:red;
}

如何让div红色的背景颜色？

2 个答案: