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

Question

I am currently using :hoverCSS pseudo-class for displaying tooltip-like elements (i.e. tables) in a way similar to what is suggested here:

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

I like the fact that this does not require any JavaScript.

Is it possible to add a further constraint to the effect that the hover only applies if no mouse button is pressed? The reason is that I want to prevent interference of these tooltips with other functionality (drag-and-drop, drop-down menus) that is based on jQuery UI. (As it happens, the tooltips are currently dragged together with their corresponding "tool" elements.)

Answer 1

Basically the if mouse clicked css selector method id :active so what you would have to do is this:

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

The order is crucial because the higher rules take priority

Here is a working fiddle: http://jsfiddle.net/Hive7/bsnnb6sf/

Also you might want to consider using visibility instead of display because otherwise you need to set the height of the parent:

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

Example fiddle: http://jsfiddle.net/Hive7/bsnnb6sf/1/