js javascript 鼠标触碰select下拉列表渐变出div层,鼠标离开渐变缩回

最新推荐文章于 2021-07-02 00:39:22 发布

limon758

最新推荐文章于 2021-07-02 00:39:22 发布

阅读量150

点赞数

分类专栏： javaScript 文章标签： JavaScript XHTML HTML ViewUI

本文链接：https://blog.csdn.net/heisetoufa/article/details/83361226

版权

javaScript 专栏收录该内容

163 篇文章 0 订阅

订阅专栏



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>黑色头发</title>
<style type="text/css">
body {
	margin:0px;
}
#but {
	position:relative;
}
#but_temp {
	background:#f3f3f3;
	border:1px solid #ccc;
	font-size:12px;
	position:absolute;
	padding:10px;
	overflow:hidden;
	display:none;
}
</style>
</head>
<body>
<table width='100%'>
<tr>
<td width='200'> </td><td><img src='http://images.51job.com/im/images/select.gif' id='but' /></td>
</tr>
</table>
<div id='but_temp'><a href='http://heisetoufa.iteye.com'>黑色头发</a><img src='http://hao123.com/logox3.gif' /></div>
<script type="text/javascript">
function $(o){
	return document.getElementById(o);
}
var IsStop = false;
var s;
function Show(o){
	var ow = parseInt($(o).style.width);
	var oh = parseInt($(o).style.height);
	if(ow < 200 && IsStop){
		$(o).style.width = ow + 5 + "px";
		$(o).style.height = oh + 2 + "px";
	}
	if(ow > 0 && !IsStop){
		$(o).style.width = ow - 5 + "px";
		$(o).style.height = oh - 2 + "px";
		if(ow == 5){
			$(o).style.display = 'none';
		}
	}
	if(ow >= 0 && ow <= 200){
		s = setTimeout("Show('" + o + "')", 1);
	}
}
function getDefaultStyle(o, a){  
	return o.currentStyle ? o.currentStyle[a] : document.defaultView.getComputedStyle(o, false)[a];
}  
$('but').onmouseover = function(){
	with($('but_temp').style){
		width = '0';
		height = '0';
		top = this.offsetTop + this.offsetHeight + 'px';
		right = document.documentElement.clientWidth - this.offsetLeft - this.offsetWidth + 'px';
		display = 'block';
	}
	IsStop = true;
	s && clearTimeout(s);
	Show('but_temp');
	this.onmouseout = $('but_temp').onmouseout = function(e){
		var e = window.event || e;
		var s = e.toElement || e.relatedTarget;
		if(s != $('but_temp') && s.parentNode != $('but_temp')){
			IsStop = false;
		}
	}
}
</script>
</body>
</html>