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近接検出器

編集：質問の主要な編集を書き直したようです。

私はあなたのコードを見て、Chromeのスクロールバーに適した方法を考え出しました。

参照2： jsFiddleスクロールバー近接検出器

于 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 に答える