Question

我有一个名为customtooltip的类，在我的css中我有

.customtooltip:hover::after{

// this emulates a tooltip, so it is a popup with info

}

我希望能够从jquery控制它。目前我只能选择.customtooltip或在工具提示中使用.hover事件，但我希望能够将弹出/工具提示重新定位到鼠标所在的位置，我相信我需要jquery。

感谢，

Answer 1

你不能; DOM中不存在css伪元素，因此JavaScript无法访问。

您可以使用window.getComputedStyle()：

检索部分属性

var elem = document.querySelector('.customtooltip'),
    currentTop = window.getComputedStyle(elem, ':after').top;

但你不能设置属性。

也就是说，CSS Pseudo-Elements Module Level 4以：

开头

添加CSS对象模型


伪元素应该可以通过脚本访问，可以从脚本中设置样式，并可用作事件目标。

注意我们将来可能会扩展此部分以允许从脚本创建伪元素。

所以，希望这种限制在不久的将来会发生变化。

参考文献：

Answer 2

要使用类.customtooltip重新定位元素，您需要首先获取鼠标位置，然后根据当前位置更改它。

$(".customtooltip").hover(function(e) {
    var x = e.pageX;
    var y = e.pageY;
    $(this).css({
        "position": "absolute",
        "top": x,
        "left": y,
    });
});

希望它有所帮助。

从jquery中选择类悬停

2 个答案: