Question

在下面的HTML中，我有一个透明的图像

<img src="transparent.png" class="transparent" />

在样式表中，我用它来悬停时改变背景颜色

.transparent{
    background-color: red;
}

.transparent:hover{
    background-color: blue;
}

并且很好，但是，我需要将某些情况下的红色更改为绿色，所以我使用php来制作这样的HTML

<img src="transparent.png" class="transparent" style="background-color: red;" />

OR

<img src="transparent.png" class="transparent" style="background-color: green;" />

样式表中的

，我省略了第一部分并离开了悬停

.transparent:hover{
    background-color: blue;
}

当我这样做时，在悬停时，没有任何反应。怎么解决？

Answer 1

Inline styles have a higher specificity比CSS文件中定义的属性。

您可以组合多个班级名称来实现您想要的目标。

.transparent {
    background-color: red;
}
.transparent:hover {
    background-color: blue;
}
.transparent.green:hover {
    background-color: green;
}

<img src="transparent.png" class="transparent" />       <!-- blue on hover -->
<img src="transparent.png" class="transparent green" /> <!-- green on hover -->

您应避免使用!important规则，因为这会使以后更难覆盖这些属性。例如，在具有单独样式覆盖的页面上。（例如，不同的内容类型/页面）

特异性示例

选择器也可按如下方式编写和排序，以达到这个效果：

/* same specificity (one class name per selector), order counts */
.transparent:hover {
    background-color: blue;
}
.green:hover {
    background-color: green;
}

/* reversed order, but higher specificity due to two class names */
.transparent.green:hover {
    background-color: green;
}
.transparent:hover {
    background-color: blue;
}

/* The base color is always overwritten, even below here, since the
 * additional pseudo-class `:hover` again accounts for a higher
 * specificity of the above selectors. */
.transparent {
    background-color: red;
}

Answer 2

您的内联样式优先于样式表中的规则。要更改此设置，您可以使用！important keyword

.transparent:hover{
    background-color: blue !important;
}

但是使用内联样式不是最好的解决方案而且使用！important被认为是一种不好的做法。为此使用css类更好。所以你的php代码将添加特殊的css类，而不是内联样式。

Answer 3

这应该有效：

.transparent:hover{
background-color: blue !imporant;

}

css img背景颜色

3 个答案: