随身笔记
随身笔记

jquery自定义a标签title提示效果并跟随鼠标移动

https://sdeno.com/wp-content/uploads/2013/11/toop.png

jquery自定义a标签title提示效果并跟随鼠标移动,这样可以美化和彰显自己有个性的博客。

首先是css样式:

[code]<style type=”text/css”>
#tooptip{position:absolute; z-index:200;word-wrap:break-word;text-align:left;padding:5px;min-height:1em;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; border:1px solid #d5d5d5; background:#efefef; color:#7e5025;}
</style>[/code]

接下来是自己写的jquery:

[code]<script type=”text/javascript”>

$(function(){
$(‘.main_content_list .main_content_list_tit h2 a’).mouseover(function(){
this.mytitle = this.title;
this.title = ”;
var tooptip = ‘<div id=”tooptip”>’+this.mytitle+'</div>’;
$(‘body’).append(tooptip);
}).mouseout(function(){
this.title = this.mytitle;
this.mytitle = ”;
$(‘#tooptip’).remove();
}).mousemove(function(e){
$(‘#tooptip’).css({‘left’:20+e.pageX+’px’,’top’:20+e.pageY+’px’});
});
});
</script>[/code]

 

没有标签
首页      前端资源      jquery制作      jquery自定义a标签title提示效果并跟随鼠标移动

随身笔记

jquery自定义a标签title提示效果并跟随鼠标移动
jquery自定义a标签title提示效果并跟随鼠标移动,这样可以美化和彰显自己有个性的博客。 首先是css样式: [code]<style type="text/css"> #tooptip{position:absolute; z-in…
扫描二维码继续阅读
2013-11-26