HTML and CSS Reference
In-Depth Information
demonstrates applying a transformation to the
div
element on the
mouseenter
and removing
it on the
mouseleave
:
<style>
.scale {
transform:scale(1.5);
}
</style>
<script>
window.onload = function () {
document.getElementById("yellowBox").addEventListener("mouseenter",
yellowBoxEnter);
document.getElementById("yellowBox").addEventListener("mouseleave",
yellowBoxLeave);
}
function yellowBoxEnter() {
this.classList.add("scale");
}
function yellowBoxLeave() {
this.classList.remove("scale");
}
</script>
<body>
<div id="yellowBox" style="width: 50%;height:50%;margin: 0 auto;
background-color:yellow;"></div>
</body>
When the mouse moves over the yellow-filled
div
, the
div
scales up. When the mouse is
moved off the
div
, it returns to the original size.
Drag-and-drop functionality
Drag-and-drop functionality enables users to pick up an element with the mouse and place it
in another location. Table 2-7 lists the events related to drag-and-drop functionality.
TABLE 2-7
Events available to drag and drop
Event
Description
Raised continuously while the element is being dragged
drag
Raised on the element being dragged when the mouse is released to end the drop
operation
dragend
Raised on a target element when a dragged element is dragged into its space
dragenter
Raised on a target element when a dragged element leaves its space
dragleave
Raised continuously on the target element while the dragged element is being
dragged over it
dragover
Raised on the element being dragged when the drag operation is beginning
dragstart
Raised on the target element when the dragged element is released
drop
Search WWH ::
Custom Search