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

아이디어:

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"
  })

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.