마우스 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>
감사합니다!
답변을 작성하시기 전에 로그인 해주세요.
