<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标悬停提示效果</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<style type="text/css">
ol{
width: 300px;
font: 16px/30px "微软雅黑";
color: #0a8cd2;
margin: 20px auto;
}
li{
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 5px 0px;
}
li:hover{
color: #f60;
}
#div{
position: absolute;
display: inline-block;
background-color: #666;
color: #fff;
padding: 0px 10px;
border-radius: 4px;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<ol>
<li>铁路部门：火车票丢失需“先补买再退款”</li>
<li>新修订新疆宗教事务条例施行 禁止宣扬极端思想</li>
<li>长征火箭从天而降瞬间被拍下 民众围观(图)</li>
<li>呼格父母:今后不再上访 打算先给儿子买个好墓地</li>
<li>中国驻印尼使馆:印尼未对持普通护照中方人员免签</li>
<li>陕西圈养大熊猫发生犬瘟热 一8岁大熊猫死亡</li>
<div id="div">
</div>
</ol>
<script type="text/javascript">
var lis = document.getElementsByTagName("li");
var div = document.getElementById("div");
for( var i = 0 ; i < lis.length ; i ++ ){
lis[i].onmousemove = function (event){
var event = event || window.event;
divMove(event.clientX+10,event.clientY+10,this.innerHTML);
}
lis[i].onmouseout = function (){
div.style.display = "none";
}
}
function divMove(x,y,html){
div.innerHTML = html;
div.style.display = "inline-block";
div.style.left = x + "px";
div.style.top = y + "px";
}
</script>
</body>
</html>
鼠标悬停提示效果javascript
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 看腻导航栏背景变色的hover效果，我们看一下比较特殊的hover效果。 分析 我们观察到，当鼠标悬停在导航栏的项...
- 了解Mockplus的用户会知道，该原型工具目前并不直接支持鼠标悬停功能。但我经过尝试，发现想用它实现一个鼠标悬停...
