Display element on hovering over a tag using CSS

어떤 icon을 마우스가 카드 위에 올라갔을 때만 보여주고 싶다면
javascript로 mouseenter event에서 감추거나 숨겨도 되지만
css로 간단하게 할 수 있는 방법이 있다.

        div {
            display: none;
        }
          
        a:hover + div {
            display: block;
            color: green;
            font-size: 25px;
        }

css hover 조건에서 icon을 표시하게 하면 된다.

그런데 tag들의 위치도 중요하다.
단순 중첩된 구조라면

// html
<a>
  <div></div>
</a>

// css
a:hover div {
  display: block;
  color: green;
  font-size: 25px;
}

와 같이 사용하면 되고

병렬로 구성되어 있다면 + 기호를 사용해야 된다.

// html
<a></a>
<div></div>

// css
a:hover + div {
  display: block;
  color: green;
  font-size: 25px;
}

이때 div태그는 a태그 뒤에 위치해야 한다.

참고 문헌

• https://www.geeksforgeeks.org/display-div-element-on-hovering-over-a-tag-using-css/