读书人

把鼠标放在字上显示下拉框,该怎么解决

发布时间: 2013-12-28 22:19:34 作者: rapoo

把鼠标放在字上显示下拉框
我想把鼠标放在我的收货宝的这几个字的时候,显示下图这样的效果,移开的时候下拉框隐藏。下拉框能显示数据库中的图片,还有一些数据库的信息。谁有这样的代码。网上找了,没有合适的代码参考。把鼠标放在字上显示下拉框,该怎么解决
[解决办法]

引用:
Quote: 引用:

Quote: 引用:

Quote: 引用:

Quote: 引用:

Quote: 引用:

Quote: 引用:

Quote: 引用:


<div id="view" onmouseover="showDiv(1)" onmouseout="showDiv(0)" onmousemove="mouseMove(event)">查看</div>
<div id="area" style="display:none;">这里的数据用ajax去请求过来</div>

<script language="javascript" type="text/javascript">
function showDiv(open)
{
document.getElementById("area").style.display=open?"":"none";
}

function mouseMove(e)
{
var o = document.getElementById("area");
o.style.left = mousePos(e).x-170;
o.style.top = mousePos(e).y;
}
function mousePos(e)
{
var x,y;
var e = e
[解决办法]
window.event;
return {
x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop
};
};
</script>
我用了你这人个,可以用,但我想鼠标能点到悬浮窗里面的东西啊,这要怎么改。


你看下那几个事件啊,把onmouseout="showDiv(0)" onmousemove="mouseMove(event)"去掉
把这个删掉没用啊。删掉效果就是鼠标移到悬浮窗之外的地方,悬浮窗存在。但鼠标移到悬浮窗里面的时候,悬浮窗效果就会消失。


你确定吗?移到查看上就一直显示啊。我测试过了

<div id="view" onmouseover="showDiv(1)" >查看</div>
<div id="area" style="display:none;">这里的数据用ajax去请求过来</div>

<script language="javascript" type="text/javascript">
function showDiv(open)
{
document.getElementById("area").style.display=open?"":"none";
}

function mouseMove(e)
{
var o = document.getElementById("area");
o.style.left = mousePos(e).x-170;
o.style.top = mousePos(e).y;
}
function mousePos(e)
{
var x,y;
var e = e
[解决办法]
window.event;
return {
x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop


};
};
</script>

我的意思是悬浮窗里面不是还有数据吗,我想鼠标还能点到悬浮窗里面的数据。就想我给的那张图片一样,能点进个人中心进去。


悬浮框里代码你自己写啊。div里面什么超链接啊什么的

比如

<div id="view" onmouseover="showDiv(1)" >查看</div>
<div id="area" style="display:none;">这里的数据用ajax去请求过来<a href="http://www.baidu.com">个人中心</a></div>

<script language="javascript" type="text/javascript">
function showDiv(open)
{
document.getElementById("area").style.display=open?"":"none";
}

function mouseMove(e)
{
var o = document.getElementById("area");
o.style.left = mousePos(e).x-170;
o.style.top = mousePos(e).y;
}
function mousePos(e)
{
var x,y;
var e = e
[解决办法]
window.event;
return {
x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop
};
};
</script>
div里面我自己写了,像你给我的代码一样,如果我鼠标离开了这个div,就是<div id="area" style="display:none;">这里的数据用ajax去请求过来<a href="http://www.baidu.com">个人中心</a></div>,我想这个悬浮窗再次隐藏怎么办。当鼠标再次移到查看的时候再次显示悬浮窗。就像淘宝商品分类那种效果。你那样那个div就一直显示在那了。


这些代码都给你了,要学会举一反三啊,少年!


<div id="view" onmouseover="showDiv(1)" >查看</div>
<div id="area" style="display:none;" onmouseout="showDiv(0)">这里的数据用ajax去请求过来<a href="http://www.baidu.com">个人中心</a></div>

<script language="javascript" type="text/javascript">
function showDiv(open)
{
document.getElementById("area").style.display=open?"":"none";
}

function mouseMove(e)
{
var o = document.getElementById("area");
o.style.left = mousePos(e).x-170;
o.style.top = mousePos(e).y;
}
function mousePos(e)
{
var x,y;
var e = e
[解决办法]
window.event;
return {
x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop
};
};
</script>

读书人网 >Java Web开发

热点推荐