🤟🏼Hover 활용

아래와 같이 호버를 할때 + 연산자를 이용하여 css 효과를 덮어 쓸 수 있다.
예를 들어 어떤 작은 광고 문구와 같은 경우 간단한 span 태그로 되어있을텐데

.thisisspan {
  display: none;
}
.thisisDiv:hover + .thisisspan {
  display: block;
  color: red;
}

마우스가 가기전에는 가려져있다가 hover가 될 때 간단하게 display속성을 변경하여 나타내기 좋은 효과인 것 같다.

물론 hover효과가 있는 nav-bar와 같은 경우에는 js를 이용하여 이벤트를 사용하는 것이 났다고 한다. 아무래도 css 만으로 구성하면 유지보수 또는 자료가 방대해지면 문제가 생기기 때문인 것 같다.

📜window scroll Event

특정 버튼을 누르면 작동하는 함수를 작성하고 있는 와중 알게된 기능이다.
window.scroll에 접근하여 따로 값을 주는 여러 코드들을 보다가 알게 된 것인데
behavior이라는 속성에 값을 주면 각 해당의미를 가진 행동을 하며 scrolling을 하게 된다

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