[Vue.js] :hover를 사용해서 버튼에 마우스 커서를 대면 색반전 시키기.

 

 

참고로 Vue.js에 대해서 잘 모릅니다.

아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다!

 

 

 

커서를 대면 버튼의 색이
다른 색으로 바뀌는 것을
만들어볼 것이다.

 

 

 

 

 

1. 실행화면

 

 

 

 

 

 

---

 

 

 

2.  HelloView.vue

버튼 클래스를 먼저 만들어줍니다. 

<template>
  <div class="main-view">
    <button class="btn" > Click </button>
  </div>
</template>

 

전체 화면 구성은 이렇게 했습니다.

<style scoped> 의 코드

.main-view {
  position: relative;
  width:  100vw;
  height: 100vh;
  background-color: lemonchiffon;
}

 

버튼의 위치는 중앙에 위치하도록 배치했습니다. 배경색은 블랙, 텍스트 컬러는 하얀색입니다.

<style scoped> 의 코드

.btn{
  position: absolute;
  width: 80px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: white;
  background-color: black;
  cursor:  pointer;
}

 

:hover는 터치스크린일 때 작동하지 않을 수 있다. 왜냐면 :hover는 마우스를 올렸을 때만 반응하는 스타일이기 때문이다. 배경색(background)은 진분홍색이고, 텍스트 컬러(color)는 동일하게 화이트로 했다. border는 테두리를 나타내는데, 아래처럼 설정을 안해주면 테두리는 검은색으로 나타난다. 3px는 선의 굵기이고 solid는 선의 형태로 그냥 일직선을 선택했다. 그리고 색상 코드를 적어주면 된다. pointer는 버튼에 커서를 대면 검지 모양의 선택하는 형태로 바뀌도록 했다.

 

<style scoped> 의 코드

.btn:hover {
  background-color: #ed3597;
  color: white;
  border: 3px solid #ed3597;
  cursor:pointer;
}