更改css：悬停距离

Question

我想知道是否有办法让 css :onhover 更快发生（即我距离链接 10 像素，:onhover 调用，而距离仍然 10 像素）。

编辑：我正在想办法改变滚动条的: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 来解决这个问题，您可以在 body 上捕获 mousemove 并计算关系。

演示： 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 选择器而不是您的子元素。