JS) 좋아요, 하트 클릭시 자바스크립트, css로 색상 변경

 

1. 부트스트랩 아이콘 홈피에서 svg 주소를 html에 붙인다.

 

 

 

2. 마우스 호버 + script로 색상 변경

1). css > hover 시 color: red로 변경.

그리고 fill-heart를 우선 화면에 보이지 않게 변경하고 fill속성을 red로 채운다.

[css]
.top-left span:nth-of-type(1):hover {
  color: red;
}
#fill-heart {
  display: none;
  fill: red;
}

 

 

2). html에서 svg에 id값을 부여한뒤

script에 하트, 채워진하트 addEventListener로 클릭이벤트 발생시 스타일의 디스플레이 속성을 변경한다.

<script>
  var 하트, 채워진하트;
  하트 = document.getElementById('heart');
  채워진하트 = document.getElementById('fill-heart');
  하트.addEventListener('click', function() {
    하트.style.display = 'none';
    채워진하트.style.display = 'block';
  });
  채워진하트.addEventListener('click', function() {
    채워진하트.style.display = 'none';
    하트.style.display = 'block';
  });
</script>

 

 

 

 

 

 

 

참고 

제로베이스 판다코딩 강의

부트스트랩아이콘 - https://icons.getbootstrap.kr/icons/heart-fill/