ウインドウの上辺にマウスオーバーすると表示される領域をつくる

　できるだけ隠したいので。

成果物

• github
• DEMO

コード抜粋

JS

　マウス位置が指定した高さHeight以下であれば要素を表示する。さもなくば非表示。

document.addEventListener('mousemove', (event)=>{
    console.log(`${event.clientY}, ${this.#height}, ${event.target}`);
    if (event.clientY < this.#height) { MouseOverTopEdgeArea.#show(this.#element); }
    else { MouseOverTopEdgeArea.#hide(this.#element); }
});

static #show(element) {
    element.style.display = 'inline';
}
static #hide(element) {
    element.style.display = 'none';
}

CSS

　対象要素のCSSを動的に生成する。<style>要素を動的生成することで。外部ファイルから取得したCSSテンプレートを元に。

　displayをnone/inlineに切り替えることで要素の表示／非表示を切り替える。

{{query}} {
    position: fixed;
    display: none;
}
{{query}}:hover {
    display: inline;
}

対象環境

• 2021-02-15
• Raspbierry pi 4 Model B
• Raspberry Pi OS buster 10.0 2020-08-20 ※
• bash 5.0.3(1)-release

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux