jQuery_jquery를 기반으로 마우스 오버 효과를 만드는 방법

이 문서의 예에서는 jQuery를 기반으로 마우스 호버 효과를 만드는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

1. HTML 만들기:

<ul>
<li><a href="/tv"><img src="images/tv_off.gif" class="mainnav"></a></li>
</ul>

2. .mainnav 클래스를 선택하세요.

$(".mainnav").hover(
 function () {
 },
 function () {
 }
);

3. imgPath 변수를 만들고 이미지 SRC를 지정합니다.

$(".mainnav").hover(
 function () {
  // Grab the source
  var imgPath = $(this).attr("src");
 },
 function () {
  // Grab the source
  var imgPath = $(this).attr("src");
  }
);

4. 문자열 off를 찾아 on으로 바꿉니다:

$(".mainnav").hover(
 function () {
  // Grab the source
  var imgPath = $(this).attr("src");
  // Replace the path in the source
  $(this).attr("src",imgPath.replace("off", "on"));
 },
 function () {
  // Grab the source
  var imgPath = $(this).attr("src");
  // Replace the path in the source
  $(this).attr("src",imgPath.replace("on", "off"));
  }
);

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.