当前位置：编程学习 > JAVA >>

把鼠标放在字上显示下拉框

我想把鼠标放在我的收货宝的这几个字的时候，显示下图这样的效果，移开的时候下拉框隐藏。下拉框能显示数据库中的图片，还有一些数据库的信息。谁有这样的代码。网上找了，没有合适的代码参考。 --------------------编程问答-------------------- 鼠标悬浮事件，
1，就是本身就有一个层，隐藏的，鼠标放上时，通过ajax加载信息，显示，离开隐藏。,
2，鼠标放上时，通过ajax加载信息，然后创建一个dom对象div,追加到目标下面。
--------------------编程问答-------------------- 


<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>
--------------------编程问答-------------------- 好像 jQuery 有不错的实现插件，楼主可以去搜一把 --------------------编程问答-------------------- 用jquery 实现 悬浮层，楼主可以谷歌一下。。 --------------------编程问答-------------------- 用ajax异步处理就好了，鼠标悬浮查询返回数据并用js拼div，自己多写写就好了，自己写的才能理解最深刻。 --------------------编程问答--------------------
引用 3 楼 defonds 的回复:
好像 jQuery 有不错的实现插件，楼主可以去搜一把


你说的是 tooltip么？ --------------------编程问答-------------------- 好像是吧。好像也不是，记不太清了 --------------------编程问答--------------------
引用 2 楼 huxiweng 的回复:


<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>
我用了你这人个，可以用，但我想鼠标能点到悬浮窗里面的东西啊，这要怎么改。 --------------------编程问答--------------------
引用 8 楼 s781112 的回复:
Quote: 引用 2 楼 huxiweng 的回复:



<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)"去掉 --------------------编程问答--------------------
引用 9 楼 huxiweng 的回复:
Quote: 引用 8 楼 s781112 的回复:

Quote: 引用 2 楼 huxiweng 的回复:



<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)"去掉
把这个删掉没用啊。删掉效果就是鼠标移到悬浮窗之外的地方，悬浮窗存在。但鼠标移到悬浮窗里面的时候，悬浮窗效果就会消失。 --------------------编程问答--------------------
引用 10 楼 s781112 的回复:
Quote: 引用 9 楼 huxiweng 的回复:

Quote: 引用 8 楼 s781112 的回复:

Quote: 引用 2 楼 huxiweng 的回复:



<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>
--------------------编程问答--------------------
引用 11 楼 huxiweng 的回复:
Quote: 引用 10 楼 s781112 的回复:

Quote: 引用 9 楼 huxiweng 的回复:

Quote: 引用 8 楼 s781112 的回复:

Quote: 引用 2 楼 huxiweng 的回复:



<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>
我的意思是悬浮窗里面不是还有数据吗，我想鼠标还能点到悬浮窗里面的数据。就想我给的那张图片一样，能点进个人中心进去。 --------------------编程问答--------------------
引用 12 楼 s781112 的回复:
Quote: 引用 11 楼 huxiweng 的回复:

Quote: 引用 10 楼 s781112 的回复:

Quote: 引用 9 楼 huxiweng 的回复:

Quote: 引用 8 楼 s781112 的回复:

Quote: 引用 2 楼 huxiweng 的回复:



<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>
--------------------编程问答--------------------
引用 13 楼 huxiweng 的回复:
Quote: 引用 12 楼 s781112 的回复:

Quote: 引用 11 楼 huxiweng 的回复:

Quote: 引用 10 楼 s781112 的回复:

Quote: 引用 9 楼 huxiweng 的回复:

Quote: 引用 8 楼 s781112 的回复:

Quote: 引用 2 楼 huxiweng 的回复:



<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就一直显示在那了。 --------------------编程问答--------------------
引用 14 楼 s781112 的回复:
Quote: 引用 13 楼 huxiweng 的回复:

Quote: 引用 12 楼 s781112 的回复:

Quote: 引用 11 楼 huxiweng 的回复:

Quote: 引用 10 楼 s781112 的回复:

Quote: 引用 9 楼 huxiweng 的回复:

Quote: 引用 8 楼 s781112 的回复:

Quote: 引用 2 楼 huxiweng 的回复:



<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>

--------------------编程问答--------------------
引用 15 楼 huxiweng 的回复:
Quote: 引用 14 楼 s781112 的回复:

Quote: 引用 13 楼 huxiweng 的回复:

Quote: 引用 12 楼 s781112 的回复:

Quote: 引用 11 楼 huxiweng 的回复:

Quote: 引用 10 楼 s781112 的回复:

Quote: 引用 9 楼 huxiweng 的回复:

Quote: 引用 8 楼 s781112 的回复:

Quote: 引用 2 楼 huxiweng 的回复:



<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>

哥，你这样真的不能点到个人中心这个链接啊！ --------------------编程问答-------------------- 用这个吧



<div id="view" onClick="showDiv(1)" >查看</div>

<div id="area" style="display:none; border:1px solid; height:400px; width:400px;">这里的数据用ajax去请求过来



<a href="http://www.baidu.com">个人中心</a>

<a href="javascript:void(0);" onclick="hideDiv();">close</a></div>

    

<script language="javascript" type="text/javascript">



	

        function showDiv(open)

        {

            document.getElementById("area").style.display=open?"":"none";

        }

            

		function hideDiv()

        {

            document.getElementById("area").style.display="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>
--------------------编程问答--------------------
引用 17 楼 huxiweng 的回复:
用这个吧



<div id="view" onClick="showDiv(1)" >查看</div>

<div id="area" style="display:none; border:1px solid; height:400px; width:400px;">这里的数据用ajax去请求过来



<a href="http://www.baidu.com">个人中心</a>

<a href="javascript:void(0);" onclick="hideDiv();">close</a></div>

    

<script language="javascript" type="text/javascript">



	

        function showDiv(open)

        {

            document.getElementById("area").style.display=open?"":"none";

        }

            

		function hideDiv()

        {

            document.getElementById("area").style.display="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 id="view" onmouseover="showDiv(1)" >查看</div>

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

<br/>

<br/>

<div id="out" onmouseover="showDiv(0)">



关掉

</div>div那块改成这样就能实现了。终于搞好了，谢谢。
补充：Java ,  Web 开发

上一个：webservice调用问题
下一个：EJB3.0+JBOSS7.1，客户端局域网内调用EJB出错

更多图片编程知识:
更多JAVA疑问解答：
java怎么在线读取ftp服务器上的文件内容
关于程序员的职业规划
HTML和JSP矛盾吗？
java小程序如何打包？
java怎么split路径文件名？
jsp+javaBean中Column 'ordersPrice' specified twice的错误
Java TCP/IP Socket网络编程系列
大家来讨论一下我到底该用什么好?Swing 还是 JavaFX
关于Hibernate实体自身多对一的抓取问题
关于apache2+tomcat群集出现的问题
spring 获取上下文问题
SSH 导入导出excel 谁有这块的资料吗?
Ext TreePanel 刷新问题
springmvc 加载一个jsp页面执行多个方法 报404
checkbox数组action怎么向页面传值
asp
php
Delphi
Matlab
JSP
Foxpro
JS
C/C++
C#/ASP.NET
VC++
JAVA
VB
汇编语言
html/css
CGI
XML/UML
wap
网站相关
网页素材
python
微信小程序
thinkphp
如果你遇到编程学习难题：
访问www.zzzyk.com 试试
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络，