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 );

};

演示：http://jsfiddle.net/ThinkingStiff/UhE2C/

HTML：

<div id="parent"></div>
<div id="overlap"></div>

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 );

};