Question

我一直试图在悬停时获取按钮的背景。我已经有了代码，但它确实有用，但出于某种原因。当我将它放在WordPress中时，背景不会改变。

这是工作代码：
https://jsfiddle.net/TopoX84/3oqgmjb0/

这是WordPresswebsite：
http://visionhostingsolutions.pro/

我还在jQuery中添加了<head>标签：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

但是，它仍然没有用。

Answer 1

您的网站存在一些问题，但事实上，您可以使用!important来处理几种CSS样式。这些会阻止JavaScript修改按钮的color和background-color。

您在网站上的CSS（与您在JsFiddle中显示的内容不同）是：

<style>
#buttonmodcss {
  display: inline !important;
  text-align: center !important; 
  width: 105px !important;
  height: 35px !important;
  border: 1px solid #5472d2 !important;
  margin-top: 0px !important;
  background: #ffffff !important; // Causes the problem
  border-radius: 4px 4px 4px 4px !important;
  color: #5472d2 !important; // Causes the problem
}
</style>

style.css中的引用也会导致按钮出现问题：

button:hover,
a.button:hover,
a.button:visited:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    background: transparent !important; // Causes a problem
}

除非网站的某些元素完全不受您的控制，否则您很少需要在CSS中使用!important。如果可以，请完全避免使用!important，并在需要时专注于使用CSS Specificity而不是覆盖样式。

其他问题

还有一些其他问题需要考虑：

您不需要在WordPress中加入jQuery;它自动完成。您的网站目前包含两次jQuery：

<!-- line 17 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<!-- line 175 -->
<script type='text/javascript' src='http://visionhostingsolutions.pro/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>

您的JavaScript函数根本不使用jQuery，因此在这种情况下包含jQuery是无关紧要的。
这应该使用#buttonmodcss:hover上的CSS而不是使用JavaScript来实现此效果。

使用CSS而不是JavaScript

我无法看到您选择使用JavaScript代替CSS的明显原因，但使用CSS会更容易实现您的目标：

<style>
    #buttonmodcss {
      display: inline;
      text-align: center; 
      width: 105px;
      height: 35px;
      border: 1px solid #5472d2;
      margin-top: 0px !important;
      background: #ffffff; // No !important
      border-radius: 4px 4px 4px 4px;
      color: #5472d2; // No !important
    }
    #buttonmodcss:hover {
        color: "#fff";
        background: "#5472d2";
    }
</style>

Answer 2

你有一些JavaScript正在改变按钮的内联样式。这会覆盖您应用的任何其他内联样式，因为JS正在有效地更改标记。

要覆盖它，理想情况下您需要更改JS本身，甚至删除影响此按钮的脚本。

但是，作为最后的手段，你可以使用这个css：

input#buttonmodcss:hover {
  background-color: black !important;
}

我在这里使用黑色进行演示，但您当然可以将其更改为所需的颜色。

P.S。 WordPress已加载JQuery，因此您不应再次加载它。此外，当您加载脚本时，您应该将它们排队，而不是将它们直接添加到头部。这是非常糟糕的做法。

element.style.backgroundColor不能在WordPress上运行

2 个答案:

其他问题

使用CSS而不是JavaScript