当光标悬停在按钮上时更改背景颜色

Question

I want the background color of the page to change when the mouse cursor is on a <button> but not if it's clicked.

 jQuery.fn.mouseIsOver = function () { if($(this[0]).is(":hover")) { return true; } return false; }; if($("b1").mouseIsOver()===true) { document.body.style.backgroundColor = "#AA0000"; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="b1", type="button">1</button>

I copied that jQuery.fn from somewhere but I don't know how to make that if(cond) .

I want to check if mouse is hovering on the button, and if so, change the background color.

Answer 1

No jQuery needed for this if you're predominantly using native JS in your code. All you need is a mouseover event listener.

 document.getElementById('b1').addEventListener('mouseover', () => { document.body.style.backgroundColor = '#aa0000'; });

 <button id="b1", type="button">1</button>

Answer 2

如果要定位 id，则必须以 # (dieze) 开始选择器

$('#b1')

Answer 3

$( "#b1" ).mouseover(function() {
  $("div.background").css( "color", "red" );
});

Answer 4

Just add mouseenter and mouseleave event listeners to your button. No need for the overhead of jQuery for this solution.

 document.getElementById('button').addEventListener('mouseenter', () => { document.body.style.backgroundColor = 'yellow'; }); document.getElementById('button').addEventListener('mouseleave', () => { document.body.style.backgroundColor = 'white'; });

 <button id="button">Button</button>

Answer 5

I'm not sure what you mean by "not if it's clicked", but what about this?

<button id="theButton">Press Me</button>

<script>
$('#theButton')
    .on('mouseenter', function(event) {
        $('body').css('background-color', 'blue');
    })
    .on('mouseleave', function(event) {
        $('body').css('background-color', 'yellow');
    });
</script>

Answer 6

Just add mouseenter and mouseleave. It's the easiest and good solution. Mousedown and up for moment of being clicked.

 document.getElementById('b1').addEventListener('mouseenter', () => { document.body.style.backgroundColor = '#A00'; }); document.getElementById('b1').addEventListener('mouseleave', () => { document.body.style.backgroundColor = '#FFF'; }); document.getElementById('b1').addEventListener('mouseup', () => { document.body.style.backgroundColor = '#A00'; }); document.getElementById('b1').addEventListener('mousedown', () => { document.body.style.backgroundColor = '#FFF'; });

 <button id="b1" type="button">1</button>

Answer 7

 .button{ cursor:pointer; } .button:hover{ background:red; }