有什么方法可以通过 javascript 检查元素是否在鼠标悬停时发生任何变化？
[英]Is there any way to check if an element has any changes on mouseover by javascript?
问题描述
我想检测一个元素是否有任何更改，例如背景颜色更改为另一个或 cursor 更改为指针，在 javascript 鼠标悬停时。
我考虑过使用 getComputedStyle(element, ":hover") 但这不适用于：hover 伪。
我还尝试通过 jQuery 模拟鼠标悬停，如下所示，但它似乎不像我预期的那样工作。
$obj.css('cursor')
$obj.mouseover().css('cursor')
有什么好办法吗？
2 个解决方案
解决方案1
0 2021-12-22 08:31:27
您可以添加一个事件监听器，例如“mouseenter”，然后每次鼠标悬停在一个元素上时控制台日志。
如果您测试此代码，您将看到您将鼠标悬停在列表项上的次数将出现在控制台中。
这是“鼠标悬停”事件文档的链接，我使用并编辑了该文档以帮助简化我的答案。
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="test">
<li>Check if item has been hovered over</li>
<li>item 2</li>
</ul>
<script>
let test = document.getElementById("test");
// This handler will be executed only once when the cursor moves over the unordered list
test.addEventListener("mouseenter", function( event ) {
// highlight the mouseenter target
console.log("purple has been hovered over")
event.target.style.color = "purple";
// reset the color after a short delay
setTimeout(function() {
event.target.style.color = "";
}, 500);
}, false);
</script>
</body>
</html>
解决方案2
0 2021-12-22 08:40:07
不幸的是，你不能像这样通过 jQuery 做到这一点。 您可能需要获取文档的样式表并手动遍历它们以找到与您的选择器匹配的内容。
function getCss(cssSelector){
var styleSheets = document.styleSheets;
var matchedRules = [];
for(var i = 0; i < styleSheets.length; i++) {
var rules = styleSheets[i].rules || sheets[i].cssRules;
for (var j = 0; j < rules.length; j++) {
if (rules[j].selectorText === cssSelector) {
matchedRules.push(rules[j].cssText);
}
}
}
return matchedRules;
}
然后您可以调用 function 获取匹配的规则。 例如：
getCss(".a:hover");
在javascript中是否有一种方法可以检测元素是否附加了任何事件？
[英]Is there a way in javascript to detect if an element has any events attached to it?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.