鼠标悬停显示说明层的案例

示例1:

//在鼠标显示一个层,该层的内容为div1的内容
function showTip(e,content,ifhave){      
//if(!e) e = window.event;
//alert(e);
if(ifhave==null || ifhave==‘0‘)return;
//var div1 = document.getElementById(‘divdisplay‘); //将要弹出的层
//div1.innerHTML="备注:"+content;
var div1 = document.getElementById(content); //将要弹出的层
var x,x1;
var y,y1;
if(window.event){
e = window.event;
x=(e.clientX+document.body.scrollLeft+10); //鼠标目前在X轴上的位置,加10是为了向右边移动10个px方便看到内容
y=(e.clientY+document.body.scrollTop+6);
//if((x+400)>document.body.clientWidth){x=x-400;}
if((y+150)>document.body.clientHeight){y=y-150-6;}
}else{
x=(e.pageX+10); //鼠标目前在X轴上的位置,加10是为了向右边移动10个px方便看到内容
y=(e.pageY+6);
//if((x+400)>document.body.clientWidth){x=x-400;}
if((y+150)>document.body.clientHeight){y=y-150-6;}
}
div1.style.left=x+"px"; //鼠标目前在X轴上的位置,加10是为了向右边移动10个px方便看到内容
div1.style.top=y+"px";
div1.style.display="block"; //div1初始状态是不可见的,设置可为可见
//window.event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状.
//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
div1.style.position="absolute"; //必须指定这个属性,否则div1层无法跟着鼠标动
}

时间: 2024-10-08 09:04:29

鼠标悬停显示说明层的案例的相关文章

内容过长显示省略号 鼠标悬停显示

<!doctype html> <html> <head> <style type="text/css"> //css控制内容过长显示省略号和悬停时显示全部内容 .li1 { list-style:none; width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; margin-top:5px

鼠标悬停显示CSS3动画边框

效果体验:http://keleyi.com/keleyi/phtml/css3/14.htm 以下是代码: 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS3鼠标悬停显示动画边框-柯乐义</title><base

jQuery鼠标悬停显示提示信息窗体

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>鼠标悬停显示提示信息窗体</titl

jQuery鼠标悬停显示提示信息窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>鼠标悬停显示提示信息窗口</title&g

鼠标悬停显示透明文字内容

我总结了一个css规律,凡是变化的css特效,总是在不同状态之间转换,只要规定好不同状态下的样式就好了 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>鼠标悬停显示透明文字内容</title> <style> .xuanting{ width:220px; margin:0 auto; height:240px; backgr

EasyUI的Datagrid鼠标悬停显示单元格内容

功能描述:table鼠标悬停显示单元格内容 1.js函数 1 function hoveringShow(value) { 2 return "<span title='" + value + "'>" + value + "</span>"; 3 } 2.调用函数 1 <table id="mydatagrid" style="width:100%;height:96%"&g

jquery实现鼠标悬停显示大图(个人随笔)

HTML代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>鼠标悬停图片放大</title> <link type="text/css" rel="stylesheet" href="stye/style.css"/> <script type="tex

实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~ 首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句: // APPLY TO STANDA

简单实现鼠标悬停显示图片

预览 HTML部分 展示位置 <c:forEach items="${pageInfo.list}" var="p"> <td class="imgShow${p.id}" onmouseover="on('${p.productImg}')" onmouseout="off()">${p.productImg}</td> 创建一个放图片的容器 <img id=&q