在WordPress自定义css中悬停时背景颜色不会改变

Posted 2023-03-05

【中文标题】在WordPress自定义css中悬停时背景颜色不会改变

【英文标题】：Background color not changing on hover in WordPress custom css

【发布时间】：2018-11-30 12:09:58

【问题描述】：

我使用的是 WordPress，所以我编写了自定义颜色来更改悬停时框的背景颜色，但它不起作用

#project1 
  height: 100px;
  width: 33.33%;
  background-color: red !important;


#project1:hover 
  background-color: blue;
  color: white;

<div id="project1"></div>

【问题讨论】：

删除 !important 对于#project1，如果你想覆盖从父类继承的规则，比如#parent #project1

@charankumar 我有两个不同的文本，但是在悬停时只有第二个跨度文本颜色改变了第一个跨度文本颜色没有改变<span style="font-size: 60px; color: #399bc8;"><strong>01</strong> </span> <span style="font-size: 40px; color: #3F4143;"> Events</span>

这是因为在 html 中应用样式比#project1:hover... 具有更高的特异性。最佳做法是将所有样式放在一个单独的 CSS 文件中，但如果您使用更高级别的特异性，您仍然可以覆盖它，例如 here。如果您想删除 HTML 中的所有样式并删除 !important 的任何用法，请查看 this。

@SirExotic 谢谢它的工作，但我有一个按钮它也有不同的颜色但是当我悬停时我不想改变按钮颜色（我希望按钮颜色应该相同）因为按钮文本也跨越

我会考虑从按钮中删除span，这似乎没有必要。

【参考方案1】：

!important 规则不会被没有 !important 的新规则覆盖。

要么从第一个声明中删除!important，要么如果您绝对必须保留它，请将它也添加到:hover 声明中。

#project1 
  height: 100px;
  width: 33.33%;
  background-color: red !important;


#project1:hover 
  background-color: blue !important;
  color: white;

<div id="project1"></div>

【讨论】：

我有两个不同的文本，但是在悬停时只有第二个跨度文本颜色改变了第一个跨度文本颜色没有改变<span style="font-size: 60px; color: #399bc8;"><strong>01</strong> </span> <span style="font-size: 40px; color: #3F4143;"> Events</span>

【参考方案2】：

尝试从第一条规则中删除 !important

#project1

    background-color: red;



#project1:hover 
    background-color: blue;
    color: white;

此外，倾向于避免放置 !important，而是使用更好的父选择器组合来进行覆盖。

【讨论】：

我有两个不同的文本，但是在悬停时只有第二个跨度文本颜色改变了第一个跨度文本颜色没有改变<span style="font-size: 60px; color: #399bc8;"><strong>01</strong> </span> <span style="font-size: 40px; color: #3F4143;"> Events</span>