hover 사용 예시 요약-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

hover 사용 예시 요약

小云云

Jan 06, 2018 am 09:11 AM

hover 요약 용법

이 글은 주로 hover(권장) 기반의 사용 예시를 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

//hover, 마우스를 사용하여 안팎으로 이동하는 또 다른 방법

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>左导航特效</title>
  <style type="text/css">
    * {
      margin: 0px;
      padding: 0px;
      font-size: 12px;
    }
    #nav .navsBox {
      width: 160px;
    }
    #nav .navsBox .firstNav {
      height:45px;
      line-height:45px;
      background-color:#EBEBEB;
      border-left:10px solid #FE705C;
      padding-left:20px;
      width:130px;
      font-weight:bold;
      cursor: pointer;
    }
    #nav .navsBox ul {
      display:none;
      list-style:none;
    }
    #nav .navsBox ul li {
      display:block;
      height:45px;
      line-height:45px;
      padding-left:70px;
      width:90px;
      background-color:#F2F2F2;
      background-position:33px 7px;
      background-repeat:no-repeat;
    }
    #nav .navsBox ul li.jedh {
      background-image:url("./images/huan.gif");
    }
    #nav .navsBox ul li.jlbbyk {
      background-image:url("./images/you.gif");
    }
    #nav .navsBox ul li.jwljb {
      background-image:url("./images/gouwu.gif");
    }
    #nav .navsBox ul li.mrljb {
      background-image:url("./images/meiri.gif");
    }
    #nav .navsBox ul li.vipjtj {
      background-image:url("./images/zhe.gif");
    }
    #nav .navsBox ul li.onbg {
      background-color:#F9DBD1;
    }
    #nav .navsBox ul li a {
      color:#000;
      text-decoration:none;
    }
  </style>
  <script src="js/jquery-1.11.3.min.js"></script>
  <script>
    $(function () {
      $(".firstNav").click(function () {
        var $ul= $(this).next();
       if($ul.is(":visible")){
         $ul.hide();
       }else{
         $ul.show();
         $ul.children().hover(function () {
           $(this).addClass("onbg");
         },function () {
           $(this).removeClass("onbg")
         })
       }
      })
    })
  </script>

</head>
<body>
<p id="nav">
  <p class="navsBox">
    <p class="firstNav">购物特权</p>
    <ul>
      <li class="jedh"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >全额兑换</a></li>
      <li class="jlbbyk"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >俱乐部包邮卡</a></li>
      <li class="jwljb"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >购物领金币</a></li>
      <li class="mrljb"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >每日领金币</a></li>
      <li class="vipjtj"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >VIP阶梯价</a></li>
    </ul>
  </p>
</p>
</body>
</html>

로그인 후 복사

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7677

Cakephp 튜토리얼

1393

C# 튜토리얼

1207

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

Related knowledge

CSS 팁: 전환을 사용하여 호버 상태 유지 Sep 27, 2022 pm 02:01 PM

호버 상태를 유지하는 방법은 무엇입니까? 다음 글에서는 JavaScript를 사용하지 않고 호버 상태를 유지하는 방법을 소개하겠습니다. 도움이 되길 바랍니다.

JSP 주석의 용도 및 분류 분석 Feb 01, 2024 am 08:01 AM

JSP 주석 분류 및 활용 분석 JSP 주석은 두 가지 유형으로 구분됩니다. 한 줄 주석: 로 끝나는 코드로 한 줄만 주석을 달 수 있습니다. 여러 줄 주석: /*로 시작하고 */로 끝나는 경우 여러 줄의 코드에 주석을 달 수 있습니다. 한 줄 주석 예 여러 줄 주석 예/**여러 줄 주석입니다*여러 줄의 코드에 주석을 달 수 있습니다*/JSP 주석 사용 JSP 주석을 사용하여 JSP 코드에 주석을 달면 읽기 쉬워집니다.

Linux 시스템에서 system() 함수의 사용법을 요약합니다. Feb 23, 2024 pm 06:45 PM

Linux에서의 system() 함수 요약 Linux 시스템에서 system() 함수는 명령줄 명령을 실행하는 데 사용할 수 있는 매우 일반적으로 사용되는 함수입니다. 이 기사에서는 system() 함수를 자세히 소개하고 몇 가지 구체적인 코드 예제를 제공합니다. 1. system() 함수의 기본 사용법은 다음과 같습니다. intsystem(constchar*command) 여기서 명령 매개변수는 문자입니다.

Haval X1 카메라로 비행을 즐겨보세요. Jan 15, 2024 pm 02:21 PM

우리는 인터넷에서 멋진 하향식 영상을 자주 볼 수 있는데, 드론으로 찍은 사진은 참으로 충격적입니다. 비행이 제한되는 곳은 어디입니까? 실제로 바로 비행 가능한 "드론"이 현재 주류이며 대부분의 사람들이 선택할 가치가 더 높습니다. 오늘은 Harvest Flying Camera X1에 대한 실습 경험을 제공하겠습니다. 외관상으로 보면 Harvest Flying Camera X1은 최초의 접이식 디자인을 가지고 있습니다. 전체 카메라의 무게는 125g으로, 접은 후에는 부담 없이 손에 쥐고 가방에 넣을 수 있습니다. . 4장의 부드러운 염색잎과 안전 프레임 디자인으로 촬영의 안전을 완벽하게 보호합니다. Dyed Leaf는 탄력성이 뛰어나고 내구성이 뛰어나며 안전하고 환경 친화적인 바이오 기반 생물학적 기질을 혁신적으로 사용합니다. 이착륙 시 손을 보호할 수 있는 완벽한 보호 프레임도 있습니다.

C 언어에서 종료 기능을 올바르게 사용하는 방법 Feb 18, 2024 pm 03:40 PM

C 언어에서 종료 기능을 사용하려면 특정 코드 예제가 필요합니다. C 언어에서는 프로그램 초기에 프로그램 실행을 종료하거나 특정 조건에서 프로그램을 종료해야 하는 경우가 많습니다. C 언어에서는 이 기능을 구현하기 위해 exit() 함수를 제공합니다. 이 기사에서는 exit() 함수의 사용법을 소개하고 해당 코드 예제를 제공합니다. Exit() 함수는 C 언어의 표준 라이브러리 함수로 헤더 파일에 포함되어 있습니다. 그 기능은 프로그램 실행을 종료하는 것이며 정수를 취할 수 있습니다.

WPSdateif 함수 사용 Feb 20, 2024 pm 10:27 PM

WPS는 일반적으로 사용되는 사무용 소프트웨어 제품군이며 WPS 테이블 기능은 데이터 처리 및 계산에 널리 사용됩니다. WPS 테이블에는 두 날짜 사이의 시차를 계산하는 데 사용되는 매우 유용한 함수인 DATEDIF 함수가 있습니다. DATEDIF 함수는 영어 단어 DateDifference의 약어입니다. 구문은 다음과 같습니다. DATEDIF(start_date,end_date,unit) 여기서 start_date는 시작 날짜를 나타냅니다.

Python 함수 소개: abs 함수의 사용법 및 예 Nov 03, 2023 pm 12:05 PM

Python 함수 소개: abs 함수 사용법 및 예 1. abs 함수 사용법 소개 Python에서 abs 함수는 주어진 값의 절대값을 계산하는 데 사용되는 내장 함수입니다. 숫자 인수를 허용하고 해당 숫자의 절대값을 반환할 수 있습니다. abs 함수의 기본 구문은 다음과 같습니다: abs(x) 여기서 x는 정수 또는 부동 소수점 숫자일 수 있는 절대값을 계산하기 위한 숫자 매개변수입니다. 2. abs 함수의 예 아래에서는 몇 가지 구체적인 예를 통해 abs 함수의 사용법을 보여줍니다. 예 1: 계산

Python 함수 소개: isinstance 함수의 사용법 및 예 Nov 04, 2023 pm 03:15 PM

Python 함수 소개: isinstance 함수의 사용법 및 예 Python은 프로그래밍을 보다 편리하고 효율적으로 만들기 위해 많은 내장 함수를 제공하는 강력한 프로그래밍 언어입니다. 매우 유용한 내장 함수 중 하나는 isinstance() 함수입니다. 이 기사에서는 isinstance 함수의 사용법과 예를 소개하고 구체적인 코드 예를 제공합니다. isinstance() 함수는 객체가 지정된 클래스나 유형의 인스턴스인지 여부를 확인하는 데 사용됩니다. 이 함수의 구문은 다음과 같습니다

See all articles

hover 사용 예시 요약

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제