Question

我有一个父元素及其子元素。

目前，当您将鼠标悬停在父级上方时，该子项会隐藏，当您不再使用css悬停在父级上方时，该项将消失。

我需要它，以便当你按住鼠标按钮移动到父元素之外时，子元素不会消失。因此，如果按住鼠标按钮然后在鼠标按钮上重新启用它，我需要禁用悬停。

这是一个可拖动的元素，需要它的子元素，句柄，在mousedown时可见。

我需要在没有jquery和其他库的情况下完成它。

Answer 1

编辑：woops ...没有看到“没有jquery”部分...我的不好，留下我的jquery答案以防万一并添加了一个没有JQuery答案降低

您可以添加一个启用悬停css的特定类：

.parentElement.hoverCSS:hover {
    .childElement {
        display: none;
    }
}

然后使用jQuery执行此操作：

$(".parentElement")
    .on("mousedown", function() {
        $(".parentElement").removeClass("hoverCSS");
    })
    .on("mouseup", function() {
        $(".parentElement").addClass("hoverCSS");
    })

这会在mousedown上添加一个事件，删除会删除隐藏孩子的css的班级hoverCSS。 mouseup上的第二个事件重新添加了一个类，该类将在父项悬停时重新启用隐藏子元素

没有JQUERY

另一种方法这样做没有jQuery或任何类型的javascript（一种黑客但它会起作用）是将你的父元素更改为一个按钮并使用这样的:active CSS： / p>

.parentElement.hoverCSS:hover {
    .childElement {
        display: none;
    }
}

.parentElement.hoverCSS:hover:active {
    .childElement {
        display: block;
    }
}

由于按住鼠标时按钮处于活动状态，因此将显示子元素

有没有办法通过JavaScript禁用css悬停？

1 个答案: