问题描述
我可以使用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>
区域也将按钮悬停在白色处？
请检查！
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>
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>
3楼
您也可以将onclick替换为onmouseover
<div class="dropdown" id="notification-dropdown" onmouseover="setColor('btnBell','#9d9d9d');">
参见