Question

我想知道是否有办法让css :onhover更早出现（即我距离链接10px，:onhover来电，但仍然是10px远。）

修改：我正试图想办法改变滚动条的:onhover距离。

编辑2：以下是代码：

html {
    overflow: auto;
}
body {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    padding: 30px; 
    overflow-y: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: none;
}

/* Handle */
::-webkit-scrollbar-thumb{
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(200,200,200,0.1);
}
::-webkit-scrollbar-thumb:hover {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(200,200,200,0.8); 
}

Answer 1

将 CSS border property 添加到该元素，然后该元素将接收悬停事件。

参考1： jsFiddle Proximity Detector

编辑：我现在看到您已经为您的问题重新编写主要编辑。

我查看了您的代码，并为Chrome的滚动条提出了一种方法！

参考2： jsFiddle Scrollbar Proximity Detector

Answer 2

我找到了解决这种侵入性的CSS方法。透明<divs>，额外标记和margin/padding方法可能会妨碍周围的UI。但是如果它们适合你，那些将是纯CSS方法。

如果您愿意使用Javascript来解决此问题，则可以在mousemove上捕获body并计算关系。

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

脚本

function isNear( element, distance, event ) {
    var left = element.documentOffsetLeft - distance,
        top = element.documentOffsetTop - distance,
        right = left + element.clientWidth + ( 2 * distance ),
        bottom = top + element.clientHeight + ( 2 * distance ),
        x = event.pageX,
        y = event.pageY;
    return ( x > left && x < right && y > top && y < bottom );
};

document.body.addEventListener( 'mousemove', function () {
    var near = document.getElementById( 'near' );

    if( isNear( near, 20, event ) ) {
        near.textContent = 'is near!';
    } else {
        near.textContent = '';
    };
} );           

window.Object.defineProperty( Element.prototype, 'documentOffsetTop', {
    get: function () { 
        return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
    }
} );

window.Object.defineProperty( Element.prototype, 'documentOffsetLeft', {
    get: function () { 
        return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 );
    }
} );

HTML

<div id="near"></div>

CSS

#near {
    border: 1px solid red;
    height: 100px;
    left: 50px;
    line-height: 100px;
    position: relative;
    text-align: center;
    top: 50px;
    width: 100px;
}

Answer 3

不，但你可以直接在其上放置一个比目标元素大10个像素的透明div，然后用Javascript给它一个onhover函数。不过，我不认为这对纯CSS来说是可能的。

Answer 4

您不需要使用javascript，可以使用padding:10px设置父包装容器，并在其上设置:hover选择器而不是您的子元素。

改变css：onhover距离

4 个答案:

脚本

HTML

CSS