0

What can prevent the CSS :hover pseudo class from getting triggered, either with CSS or JavaScript?

I'm trying to debug a really tricky problem in a third party's custom calendar control. The client wants to highlight the dates when the user hovers over them--pretty standard stuff. But something is stubbornly preventing the :hover class from working as expected.

I'm able to target the date cells with a selector and manipulate the background-color without any issues. Adding the :hover pseudo class to that selector doesn't work, though.

Unfortunately I can't post any code, because this is a private app that requires an account to use. There's honestly so much spagetti that I wouldn't even know what to include... The control is built in pure JS, no jQuery here, no siree. Several hundred lines of JS, plus hundreds of lines of CSS ... Not sure what's wrong with using the jQuery calendar control.

Is there a known set of things that can break :hover? Could it be an event propagation issue, caused by returning false from an onhover eventhandler or something?

Any other suggestions for debugging this problem? Using the browser tools isn't very effective, because the :hover rules don't get triggered unless I'm hovering. Catch 22 there.

EDIT: This answer seems like a possible culprit. They're definitely using some absolute positioning in the mix...

EDIT 2: Manually applying the :hover state with Chrome's developer tools works, confirming that my selector isn't the issue. Something is preventing the :hover state from being triggered. The calendar control is implemented as an HTML table, with each week in a row and each date in a cell. It does seem like a layering issue, but adding a high z-index to the cells doesn't do anything.

Community
  • 1
  • 1
Josh Earl
  • 18,151
  • 15
  • 62
  • 91
  • 1
    The web inspector in Chrome/Safari can show `:hover` rules, as explained in [this answer](http://stackoverflow.com/questions/5789739/how-to-use-chrome-web-inspector-to-view-hover-code/6778634#6778634). – Alex Sep 30 '12 at 21:49
  • 2
    A more precise selector with other hover options perhaps? Probably not the cause but a possible one – keyser Sep 30 '12 at 21:49
  • 1
    The firefox inspector can also show `:hover` - inspect the element, then click the drop-down of the tooltip. – Dennis Sep 30 '12 at 21:53
  • @Keyser Good thought, but I don't think this is it. I'm reskinning this app, and if there was another selector getting applied it would be a different color scheme and very obvious. – Josh Earl Sep 30 '12 at 21:53
  • Can you post a jsfiddle example? – Josh Bedo Sep 30 '12 at 22:10
  • @josh I'd love to, but like I said, there's just too much going on to isolate the issue. Several of the comments and answers have given me avenues to pursue, though. Sorry someone downvoted you--wasn't me. – Josh Earl Oct 01 '12 at 02:14

3 Answers3

3

Chrome's "Developer Tools" allows you to toggle an element's state. Perhaps you could try that and see if you gain more insight into the problem you are experiencing?

Chrome Developer Tools - Styles - Toggle Element State

desm
  • 311
  • 2
  • 6
1

It tends to have to do with the layering of the elements. Typically this can be fixed by re-layering your HTML such that the anchor ends up on top, or setting it to position: relative.

Wex
  • 15,539
  • 10
  • 64
  • 107
  • This is helpful. In this case, the calendar is a table, and the days are just text in cells. Unfortunately, one of the many treats in this project is that the HTML is compiled into a binary and thus cannot be edited. I'm limited to CSS and JavaScript. – Josh Earl Oct 02 '12 at 00:10
0

you might have !important on the unhover which would block the hover.

Josh Bedo
  • 3,410
  • 3
  • 21
  • 33
  • I'll take a look. The original developers used a lot of `!important` tags as well as hardcoding inline styles in the HTML. Thanks for the suggestion! – Josh Earl Oct 01 '12 at 02:15