Hover、WindowScoll利用

1055 ワード
テキストリンク
🤟🏼Hoverの利用
下図に示すように、+演算子を使用してcss効果を上書きします.
例えば、いくつかの小さな広告語は簡単なspanラベルである可能性があります.
.thisisspan {
  display: none;
}
.thisisDiv:hover + .thisisspan {
  display: block;
  color: red;
}
マウスは離れる前に隠されており、マウスが止まるとdisplayプロパティを簡単に変更することができ、これは良い効果のようです.
もちろん、サスペンション効果のあるnav-barのように、jsを使用してイベントを使用することが望ましい.これは、cssのみを使用して構成すると、メンテナンスや資料が膨大になると問題が発生するためかもしれません.
📜window scroll Event
これは,特定のボタンを押すことで起動できる関数を記述する過程で知った機能である.
window.volumeにアクセスし、単独で値を付与したコードを発見しました.behaviorという属性に値を付与すると,それぞれの意味を持つ行為がスクロールされる.
pageUp() {
  window.scroll({
    top: 0,
    behavior: 'smooth'
  });
}
リファレンス
  • Hover https://www.w3schools.com/howto/howto_css_display_element_hover.asp
  • window scroll Event
    https://enai.tistory.com/33
    • Asp.NetMVC+Redis(LinuxインストールRedis)
    Redis秩序集合コマンドZREVRANGEBYLEXの詳細と応用