마우스 hover 이미지 소스 변경

마우스 hover 이미지 소스 변경

QA

마우스 hover 이미지 소스 변경

본문

기본상태에서는 흰색 배경에 파란글씨와 파란색 +이미지가 있는데요
hover상태에서는 파란 배경에 흰글씨와 흰색+이미지로 변경하고 싶습니다

btn_plus.cir이 파란색 이미지

btn_plus.cir_w이 하얀색 이미지입니다

이미지 소스를 아예 변경하고 싶은데 방법이 있을까요?
백그라운드로 작업하는 방법 말고요ㅠㅠ 

 


<div class="main_btn_wrap">
              <div class="main_btn">
                <a href="#">VIEW MORE <img src="<?php echo G5_IMG_URL?>/btn_plus_cir.png" alt="더보기"></a>
              </div>



#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

img src 방법은 바뀔때 마다 매번 리소스 요청을 하게 되어 트래픽을 증가시킬수 있습니다.

background 방법을 추천드립니다.


<style>
: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(<?php echo G5_IMG_URL?>/btn_plus_cir.png);
  background-repeat: no-repeat;
  background-position: right center;
}
#main_wrap #section01 .main_btn:hover a {
  background-image: url(<?php echo G5_IMG_URL?>/btn_plus_cir_w.png);
}
</style>
<div id="main_wrap">
<section id="section01">
<div class="main_btn_wrap">
              <div class="main_btn">
                <a href="#">VIEW MORE <!-- <img src="<?php echo G5_IMG_URL?>/btn_plus_cir.png" alt="더보기"> --></a>
              </div>
</div>
</section>
</div>

css로는 src를 못바꾸구요. 스크립트로 해보세요



<div class="main_btn_wrap">
<div class="main_btn">
    <a href="#">VIEW MORE <img src="<?php echo G5_IMG_URL?>/btn_plus_cir.png" onmouseenter="this.src=this.src.replace(/\.png$/, '_w.png');" onmouseleave="this.src=this.src.replace(/_w\.png$/, '.png');" alt="더보기"></a>
</div>

답변을 작성하시기 전에 로그인 해주세요.
전체 38
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT