jquery 问题

Question

后台生成一组image元素,一组div用于显示在下方（div的id =“lay_”+image的id) 使用的都是position, 点击或mouseenter 显示一个div，怎样实现 鼠标离开image元素并且离开div块，才隐藏div块 ？怎么判断鼠标是在一个元素上。

Answer 1

$().hover(function(){},function(){})
需要你完整的html才可写出完整的js

Answer 2

<div id="layoutboxlist"><div class="cboxlist" xmlns=""><a href="http://www.baidu.com"><span class="boxtitle">FORM1</span></a><img class="boxlistImage" id="m_boxitem1_0" src="/files/small_icon_5.jpg" dir="rtl"></div><div class="cboxlist" xmlns=""><a href=""><span class="boxtitle">FORM2</span></a><img class="boxlistImage" id="m_boxitem1_1" src="/files/small_icon_2.jpg" dir="rtl"></div><div class="cboxlist" xmlns=""><a href=""><span class="boxtitle">FORM3</span></a><img class="boxlistImage" id="m_boxitem1_2" src="/files/small_icon_3.jpg" dir="rtl"></div><div class="cboxlist" xmlns=""><a href=""><span class="boxtitle">FORM4</span></a><img class="boxlistImage" id="m_boxitem1_3" src="/files/small_icon_4.jpg" dir="rtl"></div><div class="cboxlist" xmlns=""><a href=""><span class="boxtitle">FORM5</span></a><img class="boxlistImage" id="m_boxitem1_4" src="/files/small_icon_5.jpg" dir="rtl"></div><div class="cboxlist" xmlns=""><a href=""><span class="boxtitle">FORM6</span></a><img class="boxlistImage" id="m_boxitem1_5" src="/files/small_icon_3.jpg" dir="rtl"></div><div class="cboxlist" xmlns=""><a href=""><span class="boxtitle">FORM7</span></a><img class="boxlistImage" id="m_boxitem1_6" src="/files/small_icon_2.jpg" dir="rtl"></div><div class="cboxlist" xmlns=""><a href=""><span class="boxtitle">FORM8</span></a><img class="boxlistImage" id="m_boxitem1_7" src="/files/small_icon_3.jpg" dir="rtl"></div><div class="cboxlist" xmlns=""><a href=""><span class="boxtitle">FORM9</span></a><img class="boxlistImage" id="m_boxitem1_8" src="/files/small_icon_3.jpg" dir="rtl"></div><div class="cboxlist" xmlns=""><a href=""><span class="boxtitle">FORM10</span></a><img class="boxlistImage" id="m_boxitem1_9" src="/files/small_icon_1.jpg" dir="rtl"></div><div class="cboxlist" xmlns=""><a href="www.google.com"><span class="boxtitle">FORM11</span></a><img class="boxlistImage" id="m_boxitem1_10" src="/files/small_icon_1.jpg" dir="rtl"></div><div class="cboxlist" xmlns=""><a href=""><span class="boxtitle">FORM12</span></a><img class="boxlistImage" id="m_boxitem1_11" src="/files/small_icon_1.jpg" dir="rtl"></div><div class="cboxlist" xmlns=""><a href=""><span class="boxtitle">FORM13</span></a><img class="boxlistImage" id="m_boxitem1_12" src="/files/small_icon_1.jpg" dir="rtl"></div><div class="cboxlist" xmlns=""><a href=""><span class="boxtitle">FORM1</span></a><img class="boxlistImage" id="m_boxitem1_13" src="/files/small_icon_1.jpg" dir="rtl"></div><div class="cboxlist" xmlns=""><a href=""><span class="boxtitle">FORM15</span></a><img class="boxlistImage" id="m_boxitem1_14" src="/files/small_icon_1.jpg" dir="rtl"></div></div><div id="lay_layoutboxlist"><div id="lay_m_boxitem1_0" class="clay_boxlist" xmlns=""><em class="border_em">◆</em><span class="border_span">◆</span><span class="desc_title">FORM1</span><p class="desc_content">Create an amazing portfolio without any technical knowledge. Upload your work in one click, place it in a collection, and choose your look and feel by selecting a theme, it couldn't be easier!</p><span class="btn_desc_select"></span></div><div id="lay_m_boxitem1_1" class="clay_boxlist" xmlns=""><em class="border_em">◆</em><span class="border_span">◆</span><span class="desc_title">FORM2</span><p class="desc_content">Host My Portfolio provides you with the tools to create a portfolio that you can share with the world. Join today and start uploading, managing and showcasing your work online in an instant.</p><span class="btn_desc_select"></span></div><div id="lay_m_boxitem1_2" class="clay_boxlist" xmlns="" style="top: 158.8000030517578px; left: 618.6000366210938px; display: block;"><em class="border_em">◆</em><span class="border_span">◆</span><span class="desc_title">FORM3</span><p class="desc_content">Whether you're a photographer, writer, artist or architect, we support an array of file types so you can display any type of work. This includes all major image and document formats (e.g. JPG, PNG, PDF, Powerpoint, Word) as well as other popular file formats such as Illustrator, Photoshop and AutoCAD.</p><span class="btn_desc_select"></span></div><div id="lay_m_boxitem1_3" class="clay_boxlist" xmlns=""><em class="border_em">◆</em><span class="border_span">◆</span><span class="desc_title">FORM4</span><p class="desc_content">ave your own design in mind? Don’t have the time to maintain your own website? Do you need some training? Let us help you! We design beautiful, user-friendly websites. All our sites are SEO friendly and come with a fully integrated Contact Management System (CMS)</p><span class="btn_desc_select"></span></div><div id="lay_m_boxitem1_4" class="clay_boxlist" xmlns=""><em class="border_em">◆</em><span class="border_span">◆</span><span class="desc_title">FORM5</span><p class="desc_content">ave your own design in mind? Don’t have the time to maintain your own website? Do you need some training? Let us help you! We design beautiful, user-friendly websites. All our sites are SEO friendly and come with a fully integrated Contact Management System (CMS)</p><span class="btn_desc_select"></span></div><div id="lay_m_boxitem1_5" class="clay_boxlist" xmlns=""><em class="border_em">◆</em><span class="border_span">◆</span><span class="desc_title">FORM6</span><p class="desc_content">For my ability, I can become an excellent staff and develop the ability in an organization to bring high efficiency and more revenue</p><span class="btn_desc_select"></span></div><div id="lay_m_boxitem1_6" class="clay_boxlist" xmlns=""><em class="border_em">◆</em><span class="border_span">◆</span><span class="desc_title">FORM7</span><p class="desc_content">Loyal staff can bring customer groups and profits to the company, they are the foundation of the company to survive and to develop in the very competitive et</p><span class="btn_desc_select"></span></div><div id="lay_m_boxitem1_7" class="clay_boxlist" xmlns=""><em class="border_em">◆</em><span class="border_span">◆</span><span class="desc_title">FORM8</span><p class="desc_content">In the view of enterprise, rational salary reward system was one of the important factors to attract and keep pivotal staff</p><span class="btn_desc_select"></span></div><div id="lay_m_boxitem1_8" class="clay_boxlist" xmlns=""><em class="border_em">◆</em><span class="border_span">◆</span><span class="desc_title">FORM9</span><p class="desc_content">They believed that if only the manager find out the internal relationship of benefits, he could deal with the benefits between the manager and the public and get what he desired for in management</p><span class="btn_desc_select"></span></div><div id="lay_m_boxitem1_9" class="clay_boxlist" xmlns=""><em class="border_em">◆</em><span class="border_span">◆</span><span class="desc_title">FORM10</span><p class="desc_content">The influence was showed not only on mode of production and mode of exchange but also on industrial structure , class and stratum structure and organization management structure</p><span class="btn_desc_select"></span></div><div id="lay_m_boxitem1_10" class="clay_boxlist" xmlns=""><em class="border_em">◆</em><span class="border_span">◆</span><span class="desc_title">FORM11</span><p class="desc_content">However, there are some problems at the process of developing ETL system. One of the most typical problems is the confusing management of metadata</p><span class="btn_desc_select"></span></div><div id="lay_m_boxitem1_11" class="clay_boxlist" xmlns=""><em class="border_em">◆</em><span class="border_span">◆</span><span class="desc_title">FORM12</span><p class="desc_content">ERP is an advanced thought, method and measure of management</p><span class="btn_desc_select"></span></div><div id="lay_m_boxitem1_12" class="clay_boxlist" xmlns=""><em class="border_em">◆</em><span class="border_span">◆</span><span class="desc_title">FORM13</span><p class="desc_content">For the objectivity of the data in testing, it applies the theory of controlled quality in IT project management to guarantee it</p><span class="btn_desc_select"></span></div><div id="lay_m_boxitem1_13" class="clay_boxlist" xmlns=""><em class="border_em">◆</em><span class="border_span">◆</span><span class="desc_title">FORM1</span><p class="desc_content">The first kind of fusion for reusing knowledge is in the step of product design, which is realized by knowledge reusing and embedding</p><span class="btn_desc_select"></span></div><div id="lay_m_boxitem1_14" class="clay_boxlist" xmlns=""><em class="border_em">◆</em><span class="border_span">◆</span><span class="desc_title">FORM15</span><p class="desc_content">As the fundamental material base of the tourism industry, the framework, variety, quantity and quality of the tourism product would have an immediate impact on the life cycle of the regional tourism</p><span class="btn_desc_select"></span></div></div>
有两个层image的div的id =“lay_”+image的id  谢谢了。。

Answer 3

这样可以得到的id的css 难看。
$(".boxlistImage").bind("mouseenter", function (event) {
        var boxid = $(this).attr("id");
        var os_Left = $(this).offset().left-100+"px";
        var os_Top = $(this).offset().top -160+"px";
        $("#lay_" + boxid).css({ "top": os_Top, "left": os_Left});
        $("#lay_" + boxid).show("slow");    })