Javascript [ image ]

CSS hover 가 아닌 js 로 표현하기

• 이벤트 이용하기

객체.addEventListener("mouseover",function(){
	this.style.backgroundColor = "색";
  	// this = 객체
  	객체.style.transition = "3s";
  	객체.style.opacity = "1.0";
})
객체.onmouseout = function(){
	this.style.backgroundColor = "";	
  	// CSS 에 설정한 값으로 돌아가기
  	객체.style.transition = "3s";	
  	// CSS 에 지정한 값이 없는 경우
  	객체.style.opacity = "";
}

---

참고

hover : https://velog.io/@jjoung-2j/HTML-CSS-hover-cursor

border-radius, opacity : https://velog.io/@jjoung-2j/HTML-CSS-Image-Audio-Video

hover CSS 설정 : https://velog.io/@jjoung-2j/Image

---

정리

• 08_getElement_querySelectorAll -> image.html, image.css, image.js