Highlight on mouseover for optgroups (not trying to make them selectable)


For a collapsible optgroup implementation (really basic one here: https://codepen.io/elsewhere_/pen/wVrxvG), I want to have the selection cursor actually highlight the optgroups to better show which group the mouse is over currently and show they can be clicked more clearly. The behavior when clicking the optgroups doesn’t have to change whatsoever (I don’t want them to actually be selectable, in other words, I know the current implementation doesn’t allow that anyway).

Is there a style setting that can accomplish this? My gut reaction is no, as I see that the last non-optgroup element that was moused over stays highlighted so I would also need to find a way to re-style that to not be highlighted when specifically mousing over optgroups. However, if there is some variable or event I could take advantage of to re-style everything properly then it may just be doable. I’m open to suggestions!


Does this do what you want?

li.select2-results__option[role=group]:hover {
  background-color: #fc8;


It’s definitely a step in the right direction! It differs from the exact behavior I’m looking for though - basically I’m trying to make the optgroup header highlight as if it’s a clickable group, since in the collapsible dropdown implementation clicking it does do something. So in other words it should highlight and appear as if it is the sole selectable option.

There seem to be a few hurdles to getting that behavior currently:

  • The “role=group” css you suggested seems to apply to the entire optgroup which is not desired (just the header should get this mouseover css ideally). I’m not familiar enough with roles to know if there is some way to disambiguate here.
  • I’m not sure how to change the css of the currently highlighted “real” selection when an optgroup is moused over (I want to make it look not highlighted, since when the mouse is over an optgroup clicking does not select it, it expands/collapses the optgroup). Perhaps I can tie an event to mouseover of the optgroup, but again I’m hitting the hurdle of knowing how exactly to only address the optgroup header, not the whole group.


OK, If I understand you correctly, you want the optgroup heading to highlight when the optgroup is hovered while closed, but after clicking on the heading to open it, you don’t want the heading to highlight (until it is closed again).
Assuming that’s what you want, check out this fork of your pen: https://codepen.io/John30013/pen/Xvxdee?editors=0110

The solution is to add a class to the heading when the optgroup is open, and use that class to control whether the heading should highlight on hover. See the CSS I added, and the updates I made to your onclick handler.

If that’s not what you want, then can you give me an exact, step-by-step description of the behavior you want—in terms of the state of the optgroup and what is being hovered over? In other words, what should happen in each of the following states:

  • Optgroup is closed, and mouse hovers over the optgroup heading.
  • Optgroup is open, and mouse hovers over the optgroup heading.
  • Optgroup is open, and mouse hovers over a child item.