CSS :hover and :active with internal element

Question

I am building a sortable list using jQueryUI, when the user hovers over a list item I would like to present a group of options (edit, delete, etc.) - up to this point everything is working ok.

The bit I am having trouble with is that I would like the options to disappear when a list item becomes active (before the user attempts to move it to a new location).

I sort of have this working however I can no longer click the button - when I click the button the list item becomes active and hides the options.

I think this may be the issue:

    .script-item:active .scriptItemOptions {
        display: none;
    }

Am I going about this the right way?

Example JSFiddle

Answer 1

This rule is your problem, yes. The :active pseudo class refer to the exact moment when the user is clicking in an element. So when the user try to click your element, the .scriptItemOptions is hidden.

But when you click on the scriptItemOptions , the script-item is active too ! Because scriptItemOptions is a child of the script-item

I edited your jsfiddle : http://jsfiddle.net/59uhw3j6/2/ You can click the button now. I just added this rule :

.script-item:active .scriptItemOptions:active {
  display: block;
}

Answer 2

You just need to overwrite it with !important

.script-item:active .scriptItemOptions {
    display: none !important;
}

See the Demo