Can't figure out where is the mouse hover CSS handle

On my website I have got a drop down with autocomplete. I can’t figure out which CSS is being applied for the mouse hover effect where I am having a white text and a blue box


It’s usually :hover in css look for that in your css file.

It’s here shown in the devtools panel top right of the screenshot.

Hi PaulOB,
Thanks for the tips. I feel a little frustrated because I tried to nail it down using the devtools panel but couldn’t spot that line.

The problem is that as you inspect the devtools panel the focus is lost from the actual page and the menu items are no longer active.

In order to get the styles shown in the devtools I first injected some css to make the menu appear by default (display:block!important on the relevant item). Then I added the ui-active class in the devtool panel to the item to make the styles show up.

It’s quite hard to debug these dynamic elements but if you monitor the devtools panel you can often see classes being added and removed and then you can directly edit the panel to add that class and see what happens.:slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.