问题描述:

I'm using bootstrap with a fluid grid, which make the elements overlap a bit, when I hover over each element its border gets highlighted, by way of:

.on('mouseover') then apply:

$(this).css({ 'border': 'black',

'border-style': 'solid',

'border-width': '3px',

'z-index': 9999});

and:

.on('mouseleave') do:

$(this).css({ 'border': 'none',

'z-index': 111});

This does get applied on the elements, but I doesn't have any effect on the priority of mouseover, in Chrome that is.

What happens is, in Chrome, at the point where the two elements overlap the left-most element seems to always react to the mouseover, and also doesn't visually appear above the other element, where it should, because of the changed z-index. In Firefox this is no problem however.

I can't find anything about z-index in the bootstrap.css files. But again, Firefox doesn't mind.

I've also tried to apply the z-index via class in a .css file, but no difference.

Any idea why Chrome won't budge?

相关阅读:
Top