Javascript 通过将鼠标悬停在按钮外部来更改按钮的颜色

Question

我可以使用 jquery 将鼠标悬停在按钮上。有人可以为我指明如何悬停在

上的正确方向吗

  function setColor(btn, color) {
    var property = document.getElementById(btn);
    if (window.getComputedStyle(property).BackgroundColor == 'rgb(0, 0, 0)') {
      property.style.backgroundColor = color;
    } else {
      property.style.backgroundColor = "#000";
    }
  }

  function setColor(btn, color) {

    var property = document.getElementById(btn);
    if (window.getComputedStyle(property).backgroundColor == 'rgb(244, 113, 33)') {
      property.style.backgroundColor = color;
    } else {
      property.style.backgroundColor = "#f47121";
    }
  }

  document.addEventListener('onclick', function(e) {
    if (!(e.id === 'btnHousing')) {
      document.getElementById('btnHousing').property.style.backgroundColor = '#FFF'
    }
  });

  $(document).ready(function() {
    $("button").hover(function() {
      $(this).css("backgroundColor", "#fff");
    }, function() {
      $(this).css("backgroundColor", "#9d9d9d");
    });
  });

div {
  height: 100px;
  width: 300px;
  background-color: black;
}
button {
  height: 50px;
  width: 150px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown" id="notification-dropdown" onclick="setColor('btnBell','#9d9d9d');">

  <button type="button" id="btnBell">
  </button>

</div>

区域，并在悬停时将按钮设为白色？

请检查!

https://jsfiddle.net/obw6ec9v/

Answer 1

不需要 javascript，只要 css 就可以。

另外，如果你想保留颜色，点击你可以使用一个额外的类，比如

jQuery(function($) {
  $('#notification-dropdown').click(function() {
    $(this).find('button').addClass('clicked');
  })
})

div {
  height: 100px;
  width: 300px;
  background-color: black;
}
button {
  height: 50px;
  width: 150px;
  position: relative;
  background-color: #9d9d9d;
}
#notification-dropdown:hover button {
  background-color: #fff;
}
#notification-dropdown button.clicked {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown" id="notification-dropdown" onclick="setColor('btnBell','#9d9d9d');">
  <button type="button" id="btnBell"></button>
</div>

---

使用javascript

$(document).ready(function() {
  $("#notification-dropdown").hover(function(e) {
    var $btn = $('button', this);
    if (!$btn.hasClass('clicked')) {
      $btn.css("backgroundColor", e.type == 'mouseenter' ? "#fff" : '#9d9d9d');
    }
  }).click(function() {
    $('button', this).addClass('clicked').css("backgroundColor", 'red');
  })
});

div {
  height: 100px;
  width: 300px;
  background-color: black;
}
button {
  height: 50px;
  width: 150px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown" id="notification-dropdown">
  <button type="button" id="btnBell"></button>
</div>