使用 JS 更改按钮颜色后，按钮悬停不起作用答案

【问题标题】：Button hover does not work after I change button color using JS使用 JS 更改按钮颜色后，按钮悬停不起作用
【发布时间】：2022-02-12 18:01:42
【问题描述】：

我有一个在悬停时颜色会发生变化的按钮。在脚本中，当点击事件发生时，按钮颜色会发生变化。但是，Hover 在页面加载时有效，但在颜色更改后，它不起作用。代码如下：

var count = 1;

function setColor(btn, color) {
  var property = document.getElementById(btn);
  if (count == 0) {
    property.style.backgroundColor = "white";
    count = 1;
  } else {
    property.style.backgroundColor = color;
    count = 0;
  }
}

.button {
  background-color: #4caf50;
  /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4caf50;
}

.button1:hover {
  background-color: red;
  color: black;
  border: 2px solid #4caf50;
}

<h2> Hoverable Buttons</h2>
<button id="buttonGreen" class="button button1" onclick="setColor('buttonGreen', '#122256')">
Green</button>

点击按钮后发生事件，颜色变为深蓝色，悬停不起作用。

【问题讨论】：

是不是一开始的颜色是绿色，然后点击就在白色和蓝色之间切换？

标签： javascript html css

【解决方案1】：

按钮单击会添加由于悬停属性更改而具有更高优先级的内联样式。你可以添加!important来解决这个问题

.button1:hover {
     background-color: red !important;
     color: black !important;
     border: 2px solid #4caf50;
}

<html>
  <head>
    <style>
      .button {
        background-color: #4caf50; /* Green */
        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        transition-duration: 0.4s;
        cursor: pointer;
      }

      .button1 {
        background-color: white;
        color: black;
        border: 2px solid #4caf50;
      }

      .button1:hover {
        background-color: red !important;
        color: black !important;
        border: 2px solid #4caf50;
      }
    </style>

    <script>
      var count = 1;
      function setColor(btn, color) {
        var property = document.getElementById(btn);
        if (count == 0) {
          property.style.backgroundColor = "white";
          count = 1;
        } else {
          property.style.backgroundColor = color;
          count = 0;
        }
      }
    </script>
  </head>

  <body>
    <h2>Hoverable Buttons</h2>
    <button
      id="buttonGreen"
      class="button button1"
      onclick="setColor('buttonGreen', '#122256')"
      ;
    >
      Green
    </button>
  </body>
</html>

【讨论】：

@Asif Hussain，看看这个！！

【解决方案2】：

内联样式（通过style 属性应用）优先于CSS 应用样式（通过class 属性应用）。

在点击之前，没有通过style 定义的background-color，点击之后，它会否决您的CSS .button1:hover background-color。有关此主题的更多详细信息，请参阅documentation on CSS Specificity。

要查看单击按钮后的悬停效果，请尝试将您的 .button1:hover 更新为以下内容：

.button1:hover {
  background-color: red !important;
  color: black;
  border: 2px solid #4caf50;
}

注意使用!important 指示浏览器优先于内联样式。

⚠️ 使用!important 通常不是一个好习惯，因此不要认为这是一个解决方案，而是一个需要研究的主题。

【讨论】：

【解决方案3】：

这是因为您将背景样式设置为白色。根据您的情况更改此行。我会删除样式元素。但是你可以设置透明背景。你是什么样的人！

if (count == 0) {
   // property.style.backgroundColor = "white";
   property.removeAttribute('style');
  ...

工作示例

      var count = 1;
      function setColor(btn, color) {
        var property = document.getElementById(btn);
        if (count == 0) {          
          property.removeAttribute('style');
          count = 1;
        } else {
          
          property.style.backgroundColor = color;
          count = 0;
        }
      }

      .button {
        background-color: #4caf50; /* Green */
        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        transition-duration: 0.4s;
        cursor: pointer;
      }

      .button1 {
        background-color: white;
        color: black;
        border: 2px solid #4caf50;
      }

      .button1:hover {
        background-color: red;
        color: black;
        border: 2px solid #4caf50;
      }

<html>
  <head>
    <style>

    </style>

    <script>

    </script>
  </head>

  <body>
    <h2>Hoverable Buttons</h2>
    <button
      id="buttonGreen"
      class="button button1"
      onclick="setColor('buttonGreen', '#122256')"
      ;
    >
      Green1
    </button>
  </body>
</html>

注意但最好先用类再用js切换功能。

【讨论】：

【解决方案4】：

您应该避免使用内联 JS。这是一个使用闭包来防止全局变量的示例，以及一些修改过的 CSS，因此您不必直接在元素上添加样式。多想想button，以及它是如何变化的。你基本上是添加和删除颜色，所以让它们成为新的 CSS 类。

// Cache the button
const button = document.querySelector('button');

// Add an event handler to it. The handler is a function
// that returns another function which acts as the listener
// This way you don't need to create global variables.
// A function that's returned from another function, and carries
// with it the variables from its local lexical environment
// is called a closure.
button.addEventListener('click', setColor(), false);

function setColor(color) {
  
  // Initialise count
  let count = true;
  
  // Return the function to be used as the button
  // handler. Instead of updating the style directly
  // just simply add/remove classes to the element
  return function () {
    this.classList.remove('green');
    if (count) {
      this.classList.remove('blue');
      this.classList.add('white');
      this.textContent = 'White';
    } else {
      this.classList.add('blue');
      this.classList.remove('white');
      this.textContent = 'Blue';
    }

    // Change count to true if it's false, or
    // false if it's true
    count = !count;
  }

}

.button {
  border: 2px solid #4caf50;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

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

.white { background-color: white; }
.green { background-color: #4caf50; }
.blue { background-color: #122256; color: white; }

<h2>Hoverable Buttons</h2>
<button class="button green">Green</button>

【讨论】：