인라인 CSS를 사용하여 요소를 가리킵니다

이 튜토리얼에서는 인라인 CSS를 사용하여 요소를 호버링하는 몇 가지 방법을 소개합니다.

onMouseOver 및 onMouseOut JavaScript 이벤트를 사용하여 인라인 CSS를 사용하여 호버 효과 만들기

외부 CSS를 사용하는 동안 요소에 호버 효과를 적용하는 것은 쉽습니다. 예를 들어 다음과 같이 달성할 수 있습니다.

a{
 color:red;
}
a:hover{
 color:blue;
}

a 요소로 마우스를 이동하면 빨간색이 파란색으로 바뀝니다.

여기에서 :hover 선택기를 사용하여 선택한 요소를 선택했습니다. 그러나 인라인 CSS에서는 :hover 선택기를 작성할 수 없습니다.

인라인 CSS는 스타일만 지원하기 때문에 선택기를 작성할 수 없습니다. 그러나 인라인 CSS를 사용하여 호버 효과를 시뮬레이션할 수 있습니다.

이를 위해 onMouseOver 및 onMouseOut JavaScript 이벤트를 사용해야 합니다. onMouseOver 이벤트는 마우스 포인터를 요소로 이동할 때 실행됩니다.

마찬가지로 onMouseOut 이벤트는 요소에서 마우스 포인터를 이동할 때 실행됩니다. 이러한 이벤트를 앵커 태그의 속성으로 사용하고 텍스트의 색상을 설정할 수 있습니다.

예를 들어 onMouseOver 이벤트를 사용하여 마우스를 텍스트 위로 이동할 때 색상을 설정하고 onMouseOut 이벤트를 사용하여 다른 색상을 설정할 수 있습니다. this 키워드를 사용하여 style 및 color 속성을 호출한 다음 색상을 지정할 수 있습니다.

예를 들어 Click Here라는 텍스트가 있는 앵커 태그를 만들고 onMouseOver 이벤트를 앵커 태그의 속성으로 사용합니다. 값을 this.style.color로 설정하고 #f00 색상 코드를 제공하고 onMouseOut 이벤트에 색상 코드 #000을 제공합니다.

Click Here라는 텍스트 위로 마우스를 이동하면 색상이 빨간색으로 바뀝니다. 그리고 텍스트에서 마우스를 떼면 색상이 검은색으로 바뀝니다.

이러한 방식으로 JavaScript 이벤트를 사용하여 인라인 CSS를 사용하여 호버 효과를 시뮬레이션할 수 있습니다.

예제 코드:

<a href="#"
 onMouseOver="this.style.color='#f00'"
 onMouseOut="this.style.color='#000'" >
 Click Here
</a>