Jquery creates a layer and does not disappear when the mouse moves to the layer.
Use Jquery to create a layer so that when you move the mouse over the layer, the sample code is as follows. For more information, see
The Code is as follows:
<! 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"/>
<Title> untitled document </title>
<Style type = "text/css">
# Adiv div {float: left; width: 100px; border: 1px solid #333; margin-top: 100px ;}
# SDiv {width: 135px; position: absolute ;}
</Style>
<Script type = "text/javascript" src = "js/jquery-1.7.2.js"> </script>
<Script type = "text/javascript">
$ (Function (){
Var x =-90;
Var y =-70;
$ ("# Adiv div"). mouseenter (function (e ){
This. xx = ($ (this). index () + 1) * 100;
This. yy = $ (this). offset (). top;
Var login = $ (this). attr ("href ");
If ($ ("# SDiv") {$ ("# SDiv"). remove ();}
Var div = "<div id = 'sdiv 'style = 'border: 1px solid #333 '> <Map name = 'map' id =' map'> <area shape = 'rect' id = 'didlogin' coords = '16, 14,67, 35 'href = "+ login +"/> <area shape = 'rect' id = 'didregister 'coords = '75, 15,127, 37 'href = 'HTTP: // www.baidu.com '/> </map> </div> ";
$ ("Body"). append (div );
$ ("# SDiv" ).css ({"top": (this. yy + y) + "px", "left": (this. xx + x) + "px "});
}). Mouseleave (function (e ){
Var ex = e. pageX;
Var ey = e. pageY;
Var sx = $ ("# SDiv"). offset (). top;
Var sxx = $ ("# SDiv"). offset (). top + 72;
Var sy = $ ("# SDiv"). offset (). left;
Var syy = $ ("# SDiv"). offset (). left + 135;
If (ey> sx & ey <= sxx & ex> sy & ex <= syy ){
$ ("# SDiv"). mouseleave (function () {$ ("# SDiv"). remove ();});
Return false;
}
$ ("# SDiv"). remove ();
});
})
</Script>
</Head>
<Body>
<! --
<Div class = "box_onmouse">
<Map name = "Map" id = "Map">
<Area shape = "rect" id = "divLogin" coords = "16,14, 67,35" href = "#"/>
<Area shape = "rect" id = "divRegister" coords = "75,15, 127,37" href = "#"/>
</Map>
</Div>
-->
<Div id = "Adiv">
& Lt; div href = "11111" & gt; 1111111 & lt;/div & gt;
& Lt; div href = "22222" & gt; 2222222 & lt;/div & gt;
& Lt; div href = "33333" & gt; 3333333 & lt;/div & gt;
</Div>
<Div> the project has the following requirement: When you move the cursor over a div, a layer is dynamically created, and there are two button images in this layer (the artist switched over ), each image link has different addresses (the link address is provided by the div above). If you move the cursor to this layer, the created div is removed. If you move the cursor to this created div, The div is not removed. </div>
</Body>
</Html>