jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

fixes

Browse source
This commit is contained in:
Ilya Kantor 2019-08-17 12:49:03 +03:00
parent 7fd3eb1797
commit d94b2922dc
16 changed files with 218 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

8
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/index.html
View file

@ -1,15 +1,15 @@
<!DOCTYPE HTML>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="blue" onmouseenter="log(event)" onmouseleave="log(event)">
<div id="red"></div>
<div id="parent" onmouseenter="mouselog(event)" onmouseleave="mouselog(event)">parent
<div id="child">child</div>
</div>
<textarea id="text"></textarea>

7
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/script.js
View file

@ -1,4 +1,5 @@
function log(event) {
text.value += event.type + ' [target: ' + event.target.id + ']\n';
function mouselog(event) {
let d = new Date();
text.value += `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()} | ${event.type} [target: ${event.target.id}]\n`.replace(/(:|^)(\d\D)/, '$10$2');
text.scrollTop = text.scrollHeight;
}
}

27
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave.view/style.css
View file

@ -1,21 +1,22 @@
#blue {
background: blue;
#parent {
background: #D8D8D8;
width: 160px;
height: 160px;
height: 120px;
position: relative;
}
#red {
background: red;
width: 70px;
height: 70px;
#child {
background: #CFCE95;
width: 50%;
height: 50%;
position: absolute;
left: 45px;
top: 45px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#text {
textarea {
height: 140px;
width: 300px;
display: block;
height: 100px;
width: 400px;
}
}