Javascript change color of button by hovering OUTSIDE it

Question

I can hover on the button using jquery. Can someone please point me to the right direction on how to hover on the

  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>

area also and make the button white on hover?

Please check!

https://jsfiddle.net/obw6ec9v/

Answer 1

You can just change the target you're listen for hover to that div, then use $("#btnBell") instead of $(this) to change the button's color.

   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 2

There is no need of javascript just css will do.

Also if you want to retain the color, on click you can use a additional class like

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>

---

With 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 3

You can also replace onclick with onmouseover

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

See JSFiddle