html 元素样式重叠,html – 当使用CSS悬停在重叠元素上时,元素的样式悬停状态

我想不出用CSS做干净(甚至是hacky)的方法.如果您没有想出任何其他内容,这是一个Javascript方法.只需将鼠标移动到身体上即可.

function isOver( element,e ) {

var left = element.offsetLeft,top = element.offsetTop,right = left + element.clientWidth,bottom = top + element.clientHeight;

return ( e.pageX > left && e.pageX < right && e.pageY > top && e.pageY < bottom );

};

HTML：

CSS：

#parent {

border: 1px solid red;

height: 100px;

left: 50px;

position: relative;

top: 50px;

width: 100px;

}

#overlap {

background-color: blue;

border: 1px solid blue;

height: 100px;

left: 115px;

position: absolute;

top: 130px;

width: 100px;

z-index: 1;

}

脚本：

document.body.addEventListener( 'mousemove',function ( event ) {

if( isOver( document.getElementById( 'parent' ),event ) ) {

document.getElementById( 'parent' ).innerHTML = 'is over!';

} else {

document.getElementById( 'parent' ).innerHTML = '';

};

},false );

function isOver( element,bottom = top + element.clientHeight;

return ( e.pageX > left && e.pageX < right && e.pageY > top && e.pageY < bottom );

};