Breaks other [aria-label]::before hovers

[Anand Chowdhary]

In https://github.com/kazzkiq/balloon.css/blob/master/balloon.css#L42, the rule is :

[aria-label]:hover:before, [aria-label]:hover:after, [aria-label][data-balloon-visible]:before, [aria-label][data-balloon-visible]:after, [aria-label]:not([data-balloon-nofocus]):focus:before, [aria-label]:not([data-balloon-nofocus]):focus:after {
  opacity: 1;
  pointer-events: none;
}

Which can simply be:

[aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-visible]:before, [aria-label][data-balloon-visible]:after, [aria-label]:not([data-balloon-nofocus]):focus:before, [aria-label]:not([data-balloon-nofocus]):focus:after {
  opacity: 1;
  pointer-events: none;
}

This way, only [aria-label]s which have a data-balloon-pos attribution, i.e., are using Balloon.css, will be selected. Right now, any element that has an ARIA label on hover gets these styles.

For example:

<a aria-label="Visit our about page" class="external" href="#">Learn more</a>

a.external::after {
  opacity: 0.5;
  content: " (External link)";
}

This would also inherit Balloon.css's hover style, which would make the opacity 1 and remove pointer events, which isn't the desired behavior.

[Anand Chowdhary]

Duplicate of #124