하이퍼링크 마우스 프롬프트를 구현하는 JQuery 메서드

이 기사의 예에서는 JQuery가 하이퍼링크의 마우스 프롬프트 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

브라우저에는 이미 하이퍼링크 프롬프트가 제공됩니다. 하이퍼링크에 제목 속성만 추가하면 됩니다. 그러나 이 프롬프트 효과의 응답 속도는 약 1초 정도 지연될 정도로 매우 느립니다. 지금 필요한 것은 마우스가 하이퍼링크로 이동하는 순간 프롬프트가 나타나도록 하는 것입니다. 이때 a 태그에 있는 타이틀 프롬프트 효과를 제거하고 비슷한 기능의 프롬프트를 직접 만들어 주셔야 합니다.

HTML 디자인은 다음과 같습니다.

그런 다음 클래스 툴팁이 있는 하이퍼링크에 대한 마우스오버 및 마우스아웃 이벤트를 추가하세요.

$("a.tooltip").mouseover(function (){  
    //显示 title  
}).mouseout(function (){  
    //隐藏 title  
});

이 효과를 달성하기 위한 구체적인 아이디어는 다음과 같습니다.

1. 하이퍼링크에 마우스가 슬라이드되면 div 요소를 생성하고 div 요소의 내용은 title 속성의 값이 됩니다. 그러면 생성된 요소가 문서에 추가됩니다. 마우스 위치 옆에 표시되도록 x 및 y 좌표를 설정합니다.
2. 마우스가 하이퍼링크 밖으로 미끄러지면 div 요소를 제거합니다.

분석 아이디어에 따라 다음 JQuery 코드를 작성합니다.

$(function(){  
  var x = 10;   
  var y = 20;  
  $("a.tooltip").mouseover(function(e){  
    this.myTitle = this.title;  
    this.title = "";    
    var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>";
    //创建 div 元素  
    $("body").append(tooltip); //把它追加到文档中  
    $("#tooltip")  
      .css({  
        "top": (e.pageY + y) + "px",  
        "left": (e.pageX + x) + "px" 
      }).show("fast"); //设置x坐标和y坐标，并且显示  
  }).mouseout(function(){    
    this.title = this.myTitle;  
    $("#tooltip").remove(); //移除  
  });  
});

이때 효과에는 두 가지 문제가 있습니다. 첫째, 마우스를 슬라이드하면 a 태그의 title 속성 프롬프트도 나타납니다. 둘째, x 좌표와 y 좌표 설정 문제가 있습니다. 자체 제작 프롬프트와 마우스 사이의 거리에 너무 가까우면 프롬프트가 표시되지 않는 등의 문제가 발생할 수 있습니다(마우스 초점 변경으로 인해 마우스 아웃 이벤트가 발생함).

a 태그에서 제목 프롬프트 기능을 제거하려면 다음 단계를 수행해야 합니다.

1. 마우스가 안으로 들어가면 객체에 새 속성을 추가하고 이 속성에 제목 값을 전달한 다음 속성 제목 값을 지웁니다.

this.myTitle = this.title;  
s.title = "";   
var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>";
//创建 div 元素

2. 마우스를 슬라이드 아웃하면 객체의 myTitle 속성 값이 속성 제목에 할당됩니다.

마우스를 슬라이드 아웃할 때 속성 제목에 속성값을 할당해야 하는 이유는 무엇인가요? 마우스가 슬라이드 아웃될 때 다시 슬라이드 인할 때 속성 제목의 값을 고려해야 하기 때문입니다. myTitle의 값이 title 속성에 다시 할당되지 않으면 마우스가 다시 슬라이드 인될 때 제목의 값이 비어 있게 됩니다.

두 번째 문제를 해결하려면 프롬프트 요소의 상단 및 왼쪽 값을 재설정해야 합니다. 코드는 상단에 10px, 왼쪽에 20px을 추가합니다.

var x = lO;  
var y = 20;  
$("#tooltip").css({  
    "top": (e.pageY+y) + "px",  
    "left": (e.pageX+x) + "px" 
});

자, 여기서 문제는 해결되었고, 마우스 하이퍼링크 프롬프트 효과가 실현되었습니다.

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