마우스 hover 이미지 소스 변경 채택완료
기본상태에서는 흰색 배경에 파란글씨와 파란색 +이미지가 있는데요
hover상태에서는 파란 배경에 흰글씨와 흰색+이미지로 변경하고 싶습니다
btn_plus.cir이 파란색 이미지
btn_plus.cir_w이 하얀색 이미지입니다
이미지 소스를 아예 변경하고 싶은데 방법이 있을까요?
백그라운드로 작업하는 방법 말고요ㅠㅠ
Copy
VIEW MORE
Copy
#main_wrap #section01 .main_btn_wrap {width: 260px; height: 65px; border-radius: 50px; background: var(--main-color);}
#main_wrap #section01 .main_btn {display: flex; justify-content: center; align-items: center; width: 244px; height: 65px; border-radius: 50px; background: #fff;}
#main_wrap #section01 .main_btn a {display: block; font-family: 'Roboto'; font-size: 20px; color:var(--main-color); font-weight: 500; display: flex; align-items: center;}
#main_wrap #section01 .main_btn a img {margin-left: 30px;}
#main_wrap #section01 .main_btn:hover {background: var(--main-color);}
#main_wrap #section01 .main_btn:hover a {color: #fff;}
답변 2개
채택된 답변
+20 포인트
1년 전
img src 방법은 바뀔때 마다 매번 리소스 요청을 하게 되어 트래픽을 증가시킬수 있습니다.
background 방법을 추천드립니다.
Copy
:root {
--main-color: blue;
}
#main_wrap #section01 .main_btn_wrap {width: 260px; height: 65px; border-radius: 50px; background: var(--main-color);}
#main_wrap #section01 .main_btn {display: flex; justify-content: center; align-items: center; width: 244px; height: 65px; border-radius: 50px; background: #fff;}
#main_wrap #section01 .main_btn a {display: block; font-family: 'Roboto'; font-size: 20px; color:var(--main-color); font-weight: 500; display: flex; align-items: center;}
#main_wrap #section01 .main_btn a img {margin-left: 30px;}
#main_wrap #section01 .main_btn:hover {background: var(--main-color);}
#main_wrap #section01 .main_btn:hover a {color: #fff;}
#main_wrap #section01 .main_btn a {
background-image: url(/btn_plus_cir.png);
background-repeat: no-repeat;
background-position: right center;
}
#main_wrap #section01 .main_btn:hover a {
background-image: url(/btn_plus_cir_w.png);
}
VIEW MORE
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인