有没有办法通过javascript检查元素是否在鼠标悬停时有任何变化？答案

【问题标题】：有没有办法通过javascript检查元素是否在鼠标悬停时有任何变化？
【发布时间】：2022-01-23 11:24:09
【问题描述】：

我想通过 javascript 检测鼠标悬停时元素是否有任何变化，例如背景颜色更改为另一个或光标更改为指针。

我考虑过使用 getComputedStyle(element, ":hover") 但这不适用于 :hover 伪。

我也尝试通过 jQuery 模拟鼠标悬停，如下所示，但它似乎没有按我的预期工作。

$obj.css('cursor')
$obj.mouseover().css('cursor')

有什么好办法吗？

【问题讨论】：

实际目的是什么，你需要这些信息做什么？
我想做一个书签来分析其他网站。

标签： javascript jquery css

【解决方案1】：

您可以添加一个事件监听器，例如“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>

【讨论】：

嗨！ ??很好的答案。你介意让它成为一个sn-p吗？ [<>] 按钮可以让你的代码直接在 StackOverflow 中运行。
嗨彼得，谢谢！我不知道代码可以直接在 StackOverflow 中运行，现在我添加了 sn-p。
谢谢，但这不是我需要做的。我需要检查一个元素是否有任何更改，而无需将鼠标实际移动到元素上，仅通过脚本。

【解决方案2】：

不幸的是，你不能像这样通过 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;
}

然后您可以调用该函数来获取匹配的规则。例如：

getCss("a:hover");

【讨论】：

谢谢。这个方法我也查过，但是样式表并不总是系统地写的，所以通过选择器找到对应的css有时很困难。
@Akira 您能否进一步详细说明您所说的“系统地编写”是什么意思？究竟会出现什么问题？