为什么我的悬停功能不能与 jQuery 一起正常工作？ [复制]答案

【问题标题】：Why does my hover function not work correctly with jQuery? [duplicate]为什么我的悬停功能不能与 jQuery 一起正常工作？ [复制]
【发布时间】：2020-03-25 20:44:54
【问题描述】：

当我将鼠标悬停在我创建的按钮上时，我正在尝试定义悬停功能。出于某种原因，if/else 条件似乎永远不会起作用。如果特定条件在悬停时匹配，我正在尝试更改按钮的背景颜色，并在条件不匹配时更改为不同的颜色。该函数所做的只是完全跳过 IF 部分并执行 ELSE，而不管条件是否满足。：

function clickHTML() {
  $("#html").css("background-color", "#F5FEFE");



}


$(".button").hover(function() {

  if ($(this).css("background-color") == "#F5FEFE") {

    $(this).css("background-color", "#AFF7F7");
    console.log('inside the if branch; color changed');

  } else {

    //alert($(this).css("background-color"));
    $(this).css("background-color", "#E4E4E4");
  }

}, function() {

  $(this).css("background-color", "#EDEDED");
  $("#html").css("background-color", "#F5FEFE");

});

h3,
html,
body {
  font-family: Helvetica, sans-serif;
  margin: 0px;
  padding: 0px;
}

#header-bar {
  width: 100%;
  height: 50px;
  background-color: #EDEDED;
}

h3 {
  padding: 14px 400px 0px 5px;
  float: left;
}

.button-group button {
  width: 100px;
  background-color: #EDEDED;
  margin: 10px 0;
  border: 1px solid black;
  color: black;
  padding: 5px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  float: left;
  border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js">
</script>

<body onload="clickHTML()">

  <div id="header-bar">

    <h3> CodePlayer </h3>

    <div class="button-group">

      <button id="html" class="button"> HTML </button>
      <button id="CSS" class="button"> CSS </button>
      <button id="js" class="button"> JavaScript </button>
      <button id="output" class="button"> Output </button>

    </div>
  </div>
</body>

【问题讨论】：

这给了你什么（在点击处理程序中）？ console.log($(this).css("background-color"))（提示它不是"#F5FEFE"）
使用is(".active") / .addClass("active") / etc的类
@HereticMonkey 是的。谢谢。

标签： jquery html css

【解决方案1】：

如果你console.log的值

.css('backgroud-color')

你会看到它是 rgb 格式的。但是您正在尝试与十六进制进行比较。您可以尝试在与

进行比较之前对其进行转换

var rgbToHex = function (rgb) { 
  var hex = Number(rgb).toString(16);
  if (hex.length < 2) {
       hex = "0" + hex;
  }
  return hex;
};

【讨论】：

很高兴它对您有所帮助，您可以将其标记为您问题的答案

【解决方案2】：

你应该使用

if ($(this).css("background-color") == "rgb(245, 254, 254)") {

而不是

if ($(this).css("background-color") == "#F5FEFE") {

对于其余的颜色结束使用 RGB 而不是 HEX 来。

【讨论】：

为什么会有不同？请edit你的答案包括事实。