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

只需要css就可以使用javascript。

此外，如果您想保留颜色，点击后可以使用其他类，如

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>

Answer 2

您只需将您正在收听hover的目标更改为div，然后使用$("#btnBell")代替$(this)更改按钮的颜色。

   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(){
    $("div").hover(function(){
        $("#btnBell").css("backgroundColor", "#fff");
        }, function(){
        $("#btnBell").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/1.11.0/jquery.min.js"></script>
<div  class="dropdown" id="notification-dropdown" onclick="setColor('btnBell','#9d9d9d');">
    
<button type="button" id="btnBell" >
</button>
 
</div>

Answer 3

您也可以将onclick替换为onmouseover

<div class="dropdown" id="notification-dropdown" onmouseover="setColor('btnBell','#9d9d9d');">

请参阅JSFiddle