지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > Jquery는 마우스를 위로 올리면 프롬프트 상자를 띄우고 마우스를 움직이면 사라지는 아이디어와 코드를 구현합니다.

Jquery는 마우스를 위로 올리면 프롬프트 상자를 띄우고 마우스를 움직이면 사라지는 아이디어와 코드를 구현합니다.

WBOY
풀어 주다： 2016-05-16 17:33:29
원래의
1293명이 탐색했습니다.
아이디어:

1. 먼저 이 효과를 얻기 위한 요소를 찾습니다. 이번에는

클래스를 사용하여 다양한 프롬프트 콘텐츠를 표시합니다.

제목을 설정해야 합니다. 3. JQ를 통해 위치가 지정된 요소에 마우스오버 및 마우스아웃 이벤트를 추가합니다

4. 다시 개선하면 팝업 상자가 마우스를 따라 이동합니다. 대상 요소

5. 그런 다음 mouseover와 mouseout을 hover에 병합합니다.
코드 복사 코드는 다음과 같습니다. 🎜>
//페이지가 로드되었습니다.
$(function () {
var x = 10;
var y = 20; //오프셋 위치를 기준으로 프롬프트 상자 설정 마우스가 차단되는 것을 방지하기 위해
$(".prompt").hover(function (e) { //마우스 업 이벤트
this.myTitle = this.title; //사용자 정의 속성에 제목 지정 myTilte 및 내장 프롬프트 차단
this.title = "";
var tooltipHtml = "
" this.myTitle "
"; 프롬프트 상자
var tooltipHtml = "
" / /페이지에 추가
            $("#tooltip").css({                     "top": (e.pageY y) "px",             "left": (e.pageX x) " px"
}).show("fast") //프롬프트 상자의 좌표를 설정하고
표시합니다. }, function () { //마우스아웃 이벤트
this.title = this.myTitle; //제목 재설정
                                                                                   > "왼쪽": (e.pageX x) "px"
  })

관련 라벨：
弹出 프롬프트 상자 鼠标
원천：php.cn
이전 기사：jquery 사용자 정의 속성(유형/속성 값)_jquery 다음 기사：js 객체 array_javascript 기술의 OrderByAsc 및 OrderByDesc 메소드 확장을 위한 구현 아이디어
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
SQL Count()에도 0이 필요합니다. 테이블이 하나만 있고 0으로 시작하는 태그의 각 항목을 계산하고 싶습니다. 이제 다음을 시도합니다. SELECT tag,COUNT(start)ASAnzahl,us...
에서 2024-04-06 19:48:53
0
1
449
모바일 보기에서 사용자가 링크를 클릭할 때 이 탐색 표시줄을 어떻게 닫을 수 있나요? 사용자가 웹 사이트를 탐색하기 위해 링크를 클릭하면 탐색 표시줄이 닫히지 않습니까? 내비게이션 바를 닫기 위해 각 링크에 클릭 이벤트 리스너를 추가해 보았지만 작...
에서 2024-04-06 19:23:03
0
1
411
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
SCSS를 사용하여 기본값 및 CSS 변수 생성 웹사이트 스타일링을 구현하고 있습니다. 레거시 지원상의 이유로 적어도 한동안은 IE11을 지원해야 합니다. 작업 흐름과 제정신의 이유로 가능할 때마다 CSS 변수...
에서 2024-04-06 17:46:54
0
1
355
사이트에 CSS 스타일이 적용되지 않음 Bootstrap5를 사용하여 웹사이트를 만들고 있는데 index.css 속성이 index.html에 적용되지 않습니다. 서비스 카드 위로 마우스를 가져가면 배경...
에서 2024-04-06 17:12:23
0
1
336
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿