找出一个元素是不是定义了 CSS“悬停”伪类？ [复制]

Posted 2023-05-08

【中文标题】找出一个元素是不是定义了 CSS“悬停”伪类？ [复制]

【英文标题】：Find out if an element has a CSS "hover" pseudo-class defined? [duplicate]找出一个元素是否定义了 CSS“悬停”伪类？ [复制]

【发布时间】：2019-02-05 18:25:36

【问题描述】：

假设我有以下 html：

<div id="mydiv">Hello</div>

<style>
#mydiv 
    background-color: yellow;


#mydiv:hover 
    background-color: red;

</style>

使用 javascript，我如何确定#mydiv 是否应用了“悬停”伪类规则？

理想情况下，它应该是如下函数：

function HasHoverPseudoClass(element)
    //if element has the "hover" pseudo-class then
    //return true
    //else
    //return false

【问题讨论】：

可以尝试使用html事件属性onmouseover和onmouseout

这可能对你有帮助：***.com/questions/14795099/…

我相信 @sdn404 的回答比 LGSon 提供的重复帖子更直接地与问题相关。

@MichaelSorensen 所以我将该链接也添加到了欺骗列表中

基于几个cmets，你是问如何检查#mydiv是否真的被悬停，或者它是否分配了一个伪类？

【参考方案1】：

您可以使用事件mouseover：

使用 JS：

var div = document.getElementById("mydiv");

div.addEventListener("mouseover", HasHoverPseudoClass);

    function HasHoverPseudoClass()
        //if element has the "hover" pseudo-class then
        //return true
        //else
        //return false
    

使用 JQuery：

$("#mydiv").mouseover(HasHoverPseudoClass);

function HasHoverPseudoClass()
            //if element has the "hover" pseudo-class then
            //return true
            //else
            //return false
        

希望对你有帮助；）

【讨论】：

OP 没有询问如何使用脚本进行“悬停”，他们询问给定元素是否在 CSS 中设置了“悬停”类

他问：“使用 JavaScript，我如何确定#mydiv 是否应用了“悬停”伪类规则？我的回答是，如果您使用警报运行 mouseover 事件（例如），他可以查看 :hover 是否处于活动状态，因为它是相同的，对吧？

你的解释可能是正确的，所以我问了 OP 并等待他们的回答

顺便说一句，我的行动所依据的标题是 “找出一个元素是否有一个 CSS“悬停”伪类 定义？