zoukankan      html  css  js  c++  java
  • 【JavaScript/CSS】鼠标mouseover时文字提示

    //方法定义
    Ctrip.tooltip = function(sel){ var tip = document.createElement('div'); tip.id = "titleTip"; tip.innerHTML = '<b class="tri_t"></b><div id="contentTip"></div>'; var ori = ''; var hideTimer = ''; var isTrigger = false; document.body.appendChild(tip); sel.bind('mouseover',function(e){ ori = this.title; this.title = ''; if(ori != ''){ $('#contentTip').html(ori); var ofTop = $(this).offset().top + 22; var ofLeft = $(this).offset().left; $('#titleTip')[0].style.top = ofTop +'px'; $('#titleTip')[0].style.left = ofLeft +'px'; $('#titleTip').css('display','block'); } /*$('#titleTip').bind('mouseout',function(e){ console.log('trigger222'); var self = $(this); setTimeout(function(){ self.hide(); },500) })*/ e.preventDefault(); }) sel.bind('mouseout',function(e){ this.title = ori; $('#titleTip').hide(); isTrigger= false; }) }
    //方法使用 Ctrip.tooltip($(
    '.icon_desc_text')); //样式文件 #titleTip {padding:5px; border: 1px solid #67A1E2;200px;position:absolute;display:none;z-index:100;background:#fff;} .tri_t{position: absolute; 16px;height: 16px;background-image: url(http://pic.ctrip.com/common/un_jmp_tri.png);background-position: -32px 0;background-repeat: no-repeat; overflow: hidden;margin-top: -12px; left: 0px; }
  • 相关阅读:
    SHUOJ 1858 分裂的寄生兽
    POJ3057 Evacuation 解题报告
    POJ1149 PIGS 解题报告
    android与javaee通信:登录界面超级简化版
    如何实现服务器与mysql的远程通信?
    关于安卓和服务器通信的一点注意事项
    android中SQLite的基本操作
    jude的一些基本用法
    小项目难点分析
    小项目设想
  • 原文地址:https://www.cnblogs.com/jiangzhichao/p/2749608.html
Copyright © 2011-2022 走看看