[css] 마우스 올리면 나타나는 버튼 만들기

안녕하세요. 플입니다.

마우스 올리면 나타나는 버튼의 css를 진행해볼게요.

 

 

---

 1.  html 보고오기

 

2020/05/22 - [Try/coding] - [html] 마우스를 올리면 나타나는 버튼 만들기

---

 2.  전체 css

li{ float:left; width:30%; margin:0 1%; height:218px; border:3px dashed $sub_color; 

   a{ display:none; position:relative; width:100%; height:218px; text-align:center; 
   background: $sub_color; line-height: 218px; color:$main_color; font-size:28px; 
   font-family:'NanumBarunpen'; font-weight:bold; opacity: 0.85; margin-bottom:-218px; }
  
   img{ width:100%; }
   
   &:hover{ a{ display: block; }  }
   
   }

일단 전체 코드를 보여드릴게요.

제가 scss를 사용해서 중첩으로 표현했는데 css에서 li>a{  } 랑 같은 의미입니다.

 

---

 3.  중요 코드 보기

li{ 

   a{ display:none; position:relative;  }
   
   &:hover{ a{ display: block; }  }
   
   }

디자인을 제외하고 중요한 코드만 뽑아봤어요.

 

li{ 

   a{ display:none; position:relative;  } // a태그가 처음에는 보이지 않게, 포지션을 이용해 img 위에 올리기
   
   &:hover{ a{ display: block; }  } // li에 마우스를 올릴 때 a 태그 보이게 하기
   
   }

<a>태그에는 display:none;을 이용해서 일단 보이지 않게 만들어줍니다.

다만 이 태그는 보이지 않기 때문에(당연) 모든 디자인을 끝낸 다음에 마지막에 넣어주세요.

 

position을 이용해 <img> 태그와 겹칠 수 있게 만들어줍니다.

 

:hover를 이용하는데 여기서 주의점은 <a> 태그가 아니라 <a>의 부모 태그인 <li> 태그에 넣어주는 것입니다.

그리고 hover 안쪽에 <a> 태그를 한번 더 부른 뒤 display:block;를 이용해 마우스를 올리면 보이게 만들어주세요.

 

마우스를 오버하면 이런 식으로 위에 <a> 태그가 나타나게 됩니다. 오른쪽은 마우스를 올리지 않아서 나오지 않죠.

---

 4.  보러 가기

https://ssimplay.github.io/paintdrop/

paint drop

위의 링크에서 확인 가능합니다~

 

---

그럼 이만.

총총.