鼠标移开DIV或点击时，如何隐藏DIV?

glassy2000 2012-05-16 03:05:00

我在网上找到一段JS代码，实现鼠标经过按钮时弹出DIV，但是没有鼠标移出DIV或点击DIV时隐藏DIV，有谁帮我改下？我想把它改为任意文字，或按钮的下拉菜单(不是一整行<ur><li>或<div>的下拉菜单)。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<style type="text/css">
#tip{width:300px;height:200px;background:#ff0000;display:none;position:absolute;left:10px;top:30px;}
</style>
<div id="tip"></div>
<input type="button" value="鼠标经过" onmouseover="showTip()"/>
<script type="text/javascript">
function $(id){return document.getElementById(id)}
function showTip(){
$('tip').style.display = 'block';
$('tip').style.height = 0;
for(var i = 0;i<100;i++){
(function(){
var p = i;
setTimeout(function(){ $('tip').style.height = (p/100) * 200 + 'px';},p*5)
})()

}
}
function hideTip(){
$('tip').style.display = 'none';
$('tip').style.height = 0;
}
</script>
</body>
</html>

...全文

447 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

xudlQQ123 2012-05-16

打赏
举报

下面的方法分开写.一个是鼠标离开,一个是得到焦点.一个是移开焦点.

function toggle() {
if ($("#table_div").hasClass("current")) {
// 隐藏;
$("#table_div").removeClass("current");
$("#span_id").html("【+】高级");
$("#table_div").hide();
zhank = 1;
tidiv = 1;
}
else {
//显示;
$("#table_div").addClass("current");
$("#span_id").html("【-】收起");
$("#table_div").show();
tidiv = 0;
zhank = 0;
}
}

xudlQQ123 2012-05-16

打赏
举报

onmouseover="toggle()" //应该明白了吧.下面的方法.可以帮你搞定,我就不写另外一个方法了吧.

function toggle() {
if ($("#table_div").hasClass("current")) {
// 隐藏;
$("#table_div").removeClass("current");
$("#span_id").html("【+】高级");
$("#table_div").hide();
zhank = 1;
tidiv = 1;
}
else {
//显示;
$("#table_div").addClass("current");
$("#span_id").html("【-】收起");
$("#table_div").show();
tidiv = 0;
zhank = 0;
}
}

moonwrite 2012-05-16

打赏
举报

补充一下 1楼用的是jQuery

人生难得一只鸡 2012-05-16

打赏
举报

 $(function () {

        $("#a_test").mouseover(function () {

            $("#div_test").hide();

        }).mouseout(function () {

            $("#div_test").show();

        }); ;

    })