CSS选择器:悬停加上未按下鼠标按钮

CSS selector for :hover plus no mouse-button pressed?

本文关键字：鼠标 按钮 选择器 悬停 CSS      更新时间：2023-09-26

我目前使用:hover CSS伪类以类似于此处建议的方式显示类似工具提示的元素（即tables）：

div.tool:hover div.tooltip { display:block; }

我喜欢这样一个事实，即这不需要任何JavaScript。

是否可以为悬停仅在未按下鼠标按钮时应用的效果添加进一步的约束？原因是我想防止这些工具提示与基于jQuery UI的其他功能（拖放、下拉菜单）相干扰。（碰巧的是，工具提示当前与其对应的"工具"元素一起拖动。）

基本上，如果鼠标点击css选择器方法id:active，那么你必须做的是：

.tool {
    min-height: 18px;
    height: auto;
}
.tool:active .tooltip {
    display: none !important;
}
.tool:hover .tooltip {
    display: block;
}
.tooltip {
    display: none;
}

顺序至关重要，因为更高的规则优先

这是一把正在工作的小提琴：http://jsfiddle.net/Hive7/bsnnb6sf/

此外，您可能需要考虑使用可见性而不是显示，因为否则您需要设置父对象的高度：

.tool:active .tooltip {
    visibility: hidden !important;
}
.tool:hover .tooltip {
    visibility: visible;
}
.tooltip {
    visibility: hidden;
}

小提琴示例：http://jsfiddle.net/Hive7/bsnnb6sf/1/

是否可以为悬停仅适用于未按下鼠标按钮的情况？

一种选择是使用:active伪类来隐藏工具提示。根据规范：（我的重点）

5.11.3动态伪类：：hover、：active和：focus

激活元素时应用:active伪类由用户执行。例如，在用户按下鼠标的两次之间按钮并将其释放。

例如：

div.tool:hover  div.tooltip { display:block; }
div.tool:active div.tooltip { display:none; }

我认为这是不可能的，因为悬停事件总是在单击事件之前启动。如果您想在用户单击元素后禁用该效果，可以在单击事件中向css添加自定义样式规则，通过element.addClass()或element.css() 覆盖悬停规则

相关文章：