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

Posted 2023-05-08

【中文标题】Javascript通过将鼠标悬停在按钮外部来更改按钮的颜色

【英文标题】：Javascript change color of button by hovering OUTSIDE it

【发布时间】：2015-10-06 17:06:27

【问题描述】：

我可以使用 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>

area 并在悬停时使按钮变白？

请检查！

https://jsfiddle.net/obw6ec9v/

【参考方案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>

【讨论】：

是的，我知道，但我正在尝试在 javascript 上做一些工作

@Mohammed 用于点击处理，请参阅更新

【参考方案2】：

您也可以将onclick 替换为onmouseover

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

见JSFiddle

【参考方案3】：

您可以将您正在收听的目标 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>