Javascript查看div是否处于悬停状态
Javascript查看div是否处于悬停状态
提问于 2018-07-15 17:44:02
我正在尝试编写一个纯javascript，以了解某个特定的div是否处于悬停状态，如果悬停，则变量= true，否则为false。
$("#demo").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "black");
});我尝试在web上搜索，但只能得到基于jquery的解决方案。但我想把它写在javascript上。
<div id="demo">Hover on me</div>有没有人能帮我写出和上面一样的JavaScript？
回答 2
Stack Overflow用户
发布于 2018-07-15 17:48:29
向mouseover和mouseout添加事件监听器，这两个监听器都重新分配一个布尔值：
let isHovered = false;
const demo = document.querySelector('#demo');
demo.addEventListener('mouseover', () => isHovered = true);
demo.addEventListener('mouseout', () => isHovered = false);
setInterval(() => console.log(isHovered), 200);<div id="demo">Hover on me</div>
或者，如果你想准确地模仿你在问题中发布的代码，只需在你的CSS规则中添加一个:hover，而不需要Javascript：
#demo {
background-color: black;
}
#demo:hover {
background-color: yellow;
}<div id="demo">Hover on me</div>
Stack Overflow用户
发布于 2018-07-15 18:07:01
var div = document.getElementById('demo');
div.addEventListener('mouseenter', function(){
this.style.background = 'red';
});
div.addEventListener('mouseleave', function(){
this.style.background = 'green';
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51347185
复制相关文章
相似问题