mouseenter2.html revision 3de4a3a52c3fd1dffee53e2e99c6d27334763659
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara "http://www.w3.org/TR/html4/strict.dtd">
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara<html lang="en">
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara<head>
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara <title>MouseEnter and MouseLeave Event Tests</title>
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
8cf870d281dc8c242f083d14dfef05f24aa5fceeJnRouvignac <link rel="stylesheet" type="text/css" href="/build/reset/reset-min.css">
8cf870d281dc8c242f083d14dfef05f24aa5fceeJnRouvignac <link rel="stylesheet" type="text/css" href="/build/base/base-min.css">
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara <style type="text/css">
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara .container {
8cf870d281dc8c242f083d14dfef05f24aa5fceeJnRouvignac background-color: #ccc;
8cf870d281dc8c242f083d14dfef05f24aa5fceeJnRouvignac padding: 20px;
8cf870d281dc8c242f083d14dfef05f24aa5fceeJnRouvignac margin: 10px 0;
8cf870d281dc8c242f083d14dfef05f24aa5fceeJnRouvignac border-width: 1px;
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara border-style: solid;
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara border-color: #ccc;
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara }
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara .container.hover {
b138eb36479de1170a91322a845ad9e977c3af56ludovicp background-color: #fc0;
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara }
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara .container ul {
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara list-style: none;
53247d28ba99538f841a13ea2cde01c3faa3ef36kenneth_suter padding: 10px;
abb16d70d9d4b5daf29b49db1e78676d4609276amatthew_swift margin: 0;
abb16d70d9d4b5daf29b49db1e78676d4609276amatthew_swift background-color: #333;
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara }
abb16d70d9d4b5daf29b49db1e78676d4609276amatthew_swift
abb16d70d9d4b5daf29b49db1e78676d4609276amatthew_swift .container ul li {
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara margin: 10px;
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara padding: 1px;
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara background-color: #999;
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara border-width: 1px;
3bd997f0d659b0b5280791733d0101a588b01da5jvergara border-style: solid;
3bd997f0d659b0b5280791733d0101a588b01da5jvergara border-color: #999;
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara }
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara .container ul li.hover {
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara background-color: #ff6;
abb16d70d9d4b5daf29b49db1e78676d4609276amatthew_swift }
abb16d70d9d4b5daf29b49db1e78676d4609276amatthew_swift
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara .container ul li em {
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara display: block;
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara margin: 10px;
3bd997f0d659b0b5280791733d0101a588b01da5jvergara padding: 5px;
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara background-color: #666;
abb16d70d9d4b5daf29b49db1e78676d4609276amatthew_swift }
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara .outline,
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara .container ul li.outline {
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara border-color: #f00;
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara }
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara .container.focus {
b8389b1eebc70d830367f9bbf321f1093222589flutoff background-color: blue;
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara }
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara </style>
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara</head>
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara<body>
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara <h1>MouseEnter and MouseLeave Event Tests</h1>
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara <ul>
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara <li>The background color of the <code>div</code> element should turn
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara orange and have a red outline when you move the mouse over it.</li>
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara <li>The background color of each <code>li</code> should change to yellow
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara when you mouse over it and have a red outline.</li>
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara </ul>
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara <script type="text/javascript" src="/build/yui/yui.js"></script>
2304e1ba92fb55300677bbc3e15c4a28ddbe7d33lutoff
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara <script type="text/javascript">
2304e1ba92fb55300677bbc3e15c4a28ddbe7d33lutoff YUI({ }).use('event', 'node-style', function (Y) {
4d7a9734afbc1f92d79b9d3bf092d56998c13bd7jvergara
707e0e01b90aa93972ca8c16f655685da6cde6edlutoff // Build the content via a timer to test Event's mechanism to
707e0e01b90aa93972ca8c16f655685da6cde6edlutoff // defer the attachment of listeners until they are available
707e0e01b90aa93972ca8c16f655685da6cde6edlutoff // in the DOM
707e0e01b90aa93972ca8c16f655685da6cde6edlutoff
707e0e01b90aa93972ca8c16f655685da6cde6edlutoff Y.Lang.later(3000, Y, function () {
707e0e01b90aa93972ca8c16f655685da6cde6edlutoff Y.one('body').append('<div id="container-1" class="container"><ul id="ul-1"><li><em>Item Type One</em></li><li><em>Item Type Two</em></li><li><em>Item Type Three</em></li></ul></div><button id="remove-listeners">Remove Listeners</button>');
707e0e01b90aa93972ca8c16f655685da6cde6edlutoff });
707e0e01b90aa93972ca8c16f655685da6cde6edlutoff
707e0e01b90aa93972ca8c16f655685da6cde6edlutoff
707e0e01b90aa93972ca8c16f655685da6cde6edlutoff var onContainerMouseEnter = function (event) {
707e0e01b90aa93972ca8c16f655685da6cde6edlutoff
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara if (event.currentTarget == this) {
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara this.addClass("hover");
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara }
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara };
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara var onContainerMouseLeave = function (event) {
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
b369c17aec493f598a0fefe8885418cd3db596e9jvergara if (event.currentTarget == this) {
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara this.removeClass("hover");
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara }
52e2f87fad88634e1bc5e70af7fc7407d7a92097jvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara };
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara var onLIMouseEnter = function (event) {
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara if (event.container.get("id") == "container-1") {
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara this.addClass("hover");
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara }
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara };
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara var onLIMouseLeave = function (event) {
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara if (event.container.get("id") == "container-1") {
53247d28ba99538f841a13ea2cde01c3faa3ef36kenneth_suter this.removeClass("hover");
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara }
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara };
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara var addContainerOutline = function (event, className) {
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara event.currentTarget.addClass(className);
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara };
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara var removeContainerOutline = function (event) {
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
2304e1ba92fb55300677bbc3e15c4a28ddbe7d33lutoff event.currentTarget.removeClass(this);
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara };
9cc3eca3a2a8ba357e0124845a9dd7ab0abbc726jvergara
9cc3eca3a2a8ba357e0124845a9dd7ab0abbc726jvergara
9cc3eca3a2a8ba357e0124845a9dd7ab0abbc726jvergara var addLIOutline = function (event, className) {
9cc3eca3a2a8ba357e0124845a9dd7ab0abbc726jvergara
9cc3eca3a2a8ba357e0124845a9dd7ab0abbc726jvergara event.currentTarget.addClass(className);
9cc3eca3a2a8ba357e0124845a9dd7ab0abbc726jvergara
9cc3eca3a2a8ba357e0124845a9dd7ab0abbc726jvergara };
9cc3eca3a2a8ba357e0124845a9dd7ab0abbc726jvergara
9cc3eca3a2a8ba357e0124845a9dd7ab0abbc726jvergara var removeLIOutline = function (event) {
9cc3eca3a2a8ba357e0124845a9dd7ab0abbc726jvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara event.currentTarget.removeClass(this);
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara };
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara var setLIColor = function (event) {
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara this.setStyle("color", "#fff");
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara };
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara var removeLIColor = function (event) {
3bd997f0d659b0b5280791733d0101a588b01da5jvergara
3bd997f0d659b0b5280791733d0101a588b01da5jvergara this.setStyle("color", "");
3bd997f0d659b0b5280791733d0101a588b01da5jvergara
3bd997f0d659b0b5280791733d0101a588b01da5jvergara };
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara var handle1 = Y.on("mouseenter", onContainerMouseEnter, "#container-1");
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara var handle2 = Y.on("mouseleave", onContainerMouseLeave, "#container-1");
3bd997f0d659b0b5280791733d0101a588b01da5jvergara
3bd997f0d659b0b5280791733d0101a588b01da5jvergara var handle3 = Y.on("mouseenter", addContainerOutline, "#container-1", Y, "outline");
3bd997f0d659b0b5280791733d0101a588b01da5jvergara var handle4 = Y.on("mouseleave", removeContainerOutline, "#container-1", "outline");
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
3bd997f0d659b0b5280791733d0101a588b01da5jvergara var handle5 = Y.on("mouseenter", setLIColor, "#container-1 li");
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara var handle6 = Y.on("mouseleave", removeLIColor, "#container-1 li");
3bd997f0d659b0b5280791733d0101a588b01da5jvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara var handle7 = Y.delegate("mouseenter", onLIMouseEnter, "#container-1", "li");
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara var handle8 = Y.delegate("mouseleave", onLIMouseLeave, "#container-1", "li");
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara var handle9 = Y.delegate("mouseenter", addLIOutline, "#container-1", "li", Y, "outline");
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara var handle10 = Y.delegate("mouseleave", removeLIOutline, "#container-1", "li", "outline");
53247d28ba99538f841a13ea2cde01c3faa3ef36kenneth_suter
4d7a9734afbc1f92d79b9d3bf092d56998c13bd7jvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara Y.on("click", function () {
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara handle1.detach();
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara handle2.detach();
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara handle3.detach();
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara handle4.detach();
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara handle5.detach();
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara handle6.detach();
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara handle7.detach();
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara handle8.detach();
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara handle9.detach();
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara handle10.detach();
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara }, "#remove-listeners");
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara });
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara </script>
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara</body>
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara</html>
e6c6f8f41fadf2a82ad48f7b80ca196a6e146aabjvergara