1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Daniel Hagnoul" />
<title>Page type</title>
<style type="text/css">
body {
background-color:#696969;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:medium;
font-style:normal;
font-weight:normal;
line-height:normal;
letter-spacing:normal;
}
h1,h2,h3,h4,h5 {
font-family:"Times New Roman", Times, serif;
}
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
margin:0px;
padding:0px;
}
p {
padding:6px;
}
ul,ol,dl {
list-style:none;
padding-left:6px;
padding-top:6px;
}
li {
padding-bottom:6px;
}
div#conteneur {
width:95%;
margin:12px auto;
padding:6px;
background-color:#FFFFFF;
color:#000000;
border:1px solid #666666;
font-size:0.8em;
}
</style>
<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// false par défaut, true si les conditions sont remplies
var boolDivNewMachin = true;
$("div").not("#conteneur, #newMachin, #newMachin div").mouseenter(function(){
//console.log("le pointeur est sur une autre division");
if (boolDivNewMachin){
$("#newMachin").append("<div id='" + $("#inputID").attr("div") + "' style='width:150px; height:150px; border:1px solid red;'></div>");
boolDivNewMachin = false;
}
});
});
</script>
</head>
<body>
<div id="conteneur">
<div id="newMachin" style="border:1px solid black;">
<input id="inputID" type="text" div="titleNewMachin" />
<span>Text</span>
<div>Nouvel élément</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div id="autreDiv">
<p>
Donec in ligula. Cras semper. Fusce semper. Phasellus sit amet tortor id sapien aliquam vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tincidunt elementum turpis. Suspendisse ac ligula. In vitae nisi. Praesent non lacus et mi ornare tempus. Phasellus faucibus volutpat nisi. Aliquam vel lorem eget nisl malesuada ultrices. Vivamus orci augue, scelerisque in, ornare nec, tempus commodo, diam. Nam a augue in risus pellentesque auctor. Nulla adipiscing mauris in justo. Sed eu diam. Vestibulum elementum, eros non porta tristique, velit ipsum euismod enim, quis tempus elit felis in ipsum. Etiam facilisis ante id tellus. Nulla facilisi. Pellentesque sem.
</p>
</div>
<div>
<p>
Donec in ligula. Cras semper. Fusce semper. Phasellus sit amet tortor id sapien aliquam vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tincidunt elementum turpis. Suspendisse ac ligula. In vitae nisi. Praesent non lacus et mi ornare tempus. Phasellus faucibus volutpat nisi. Aliquam vel lorem eget nisl malesuada ultrices. Vivamus orci augue, scelerisque in, ornare nec, tempus commodo, diam. Nam a augue in risus pellentesque auctor. Nulla adipiscing mauris in justo. Sed eu diam. Vestibulum elementum, eros non porta tristique, velit ipsum euismod enim, quis tempus elit felis in ipsum. Etiam facilisis ante id tellus. Nulla facilisi. Pellentesque sem.
</p>
</div>
</div>
</body>
</html> |
