当前位置: 动力学知识库 > 问答 > 编程问答 >

Jquery mouseover and z-index on overlapping elements (Chrome)

问题描述:

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?

分享给朋友:
您可能感兴趣的文章:
随机阅读: