Question

我目前正在使用:hover CSS伪类以类似于建议here的方式显示类似工具提示的元素（即table s）：

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

我喜欢这个不需要任何JavaScript的事实。

是否可以在没有按下鼠标按钮的情况下为悬停仅适用的效果添加另一个约束？原因是我希望防止这些工具提示受到基于jQuery UI的其他功能（拖放，下拉菜单）的干扰。（实际上，工具提示目前与相应的＆＃34;工具＆＃34;元素一起拖动。）

Answer 1

基本上，如果鼠标单击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/

Answer 2

是否可以为该效果添加另一个约束只有在没有按下鼠标按钮时才悬停？

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

<强> 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus

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

例如：

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

Answer 3

我认为这是不可能的，因为悬停事件将始终在点击事件之前启动。如果要在用户单击元素后禁用该效果，可以通过element.addClass()或element.css()

在点击事件中向css添加自定义样式规则以覆盖悬停规则

CSS选择器：hover加上没有按下鼠标按钮？

3 个答案: