-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
blend-mode 스크립트 예제 질문
20.11.23 12:34 작성 조회수 206
0
안녕하세요 :)
예제 보면서 따라해보고 있는데 한가지 궁금한게 있어서요!
혹시 버튼에 over 될때 scale이 변할때. mix-blend-mode 속성을 유지 할 수 있는 방법이 있을까요?
선생님 예제 따라하다보니 mouseover할때 색상이 좀 변하는 거 같아서 css hover시 background:white 없애고 transition 타임을 좀 느리게 설정하니까 scale 할때 mix-blend-mode속성이 안먹는게 보이더라구요 ㅜㅜ
혹시 이 부분을 해결할 수 있는 방법이 있을까요?
http://irene080.dothome.co.kr/inflearn/mouse_YesOrNo.html
(제가 작업한 예제 웹사이트 입니다, 참고부탁드릴게요!)
답변을 작성해보세요.
1
0
코딩일레븐
지식공유자2020.11.24
방법을 찾았습니다.
js 수정 (btn_no도 동일하게 수정)
//네 버튼 이벤트
btn_yes.addEventListener("mouseover", function(e){
circle.classList.add("on");
//circle.style.transform = "scale(.3)";
})
btn_yes.addEventListener("mouseout", function(e){
circle.classList.remove("on");
//circle.style.transform = "scale(1)";
})
css 추가
.cursorItem .circle.on {
margin: -20px 0 0 -20px;
width: 40px;
height: 40px;
}
transform 속성인 scale 값 변경 대신
width, height 값 변경으로 바꿨습니다.
테스트 한 번 해보세요.
0
0
0
0
답변 6