Question

我希望当鼠标光标位于<button>时，页面的背景颜色会发生变化，但如果点击它则不会。

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>

我从某处复制了jQuery.fn，但我不知道如何制作if(cond)。

我想检查鼠标是否悬停在按钮上，如果是，请更改背景颜色。

Answer 1

如果您在代码中主要使用本机JS，则不需要jQuery。您所需要的只是一个mouseover事件监听器。

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

只需将mouseenter和mouseleave个事件监听器添加到您的按钮即可。此解决方案无需jQuery的开销。

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

我不确定你的意思是“如果被点击了”，那该怎么办？

<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

只需添加mouseenter和mouseleave即可。这是最简单，最好的解决方案。 Mousedown和被点击的时刻。

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;
}

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

7 个答案: