2

我想知道是否有办法让 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); 
}
4

4 回答 4

3

添加CSS border property到随后将接收悬停事件的元素。

参考1： jsFiddle Proximity Detector

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

我查看了您的代码，并提出了您可能喜欢的 Chrome 滚动条的方法！

参考2： jsFiddle Scrollbar Proximity Detector

于 2012-07-15T23:58:31.513 回答
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;
}
于 2012-07-15T22:53:37.310 回答
1

不，但是您可以将一个比目标元素大 10 像素的透明 div 直接放在它上面，然后onhover使用 Javascript 给它一个函数。不过，我认为纯 CSS 不可能做到这一点。

于 2012-07-15T22:29:47.127 回答
0

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

于 2012-07-15T22:33:08.373 回答