mouseenter.html revision d84a18b9cdce9e87cf171d49c51a5d5986e2cf0f
45e9809aff7304721fddb95654901b32195c9c7avboxsync<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
45e9809aff7304721fddb95654901b32195c9c7avboxsync "http://www.w3.org/TR/html4/strict.dtd">
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync<html lang="en">
45e9809aff7304721fddb95654901b32195c9c7avboxsync<head>
45e9809aff7304721fddb95654901b32195c9c7avboxsync <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
45e9809aff7304721fddb95654901b32195c9c7avboxsync <title>MouseEnter and MouseLeave Event Tests</title>
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync <link rel="stylesheet" type="text/css" href="/build/reset/reset-min.css">
45e9809aff7304721fddb95654901b32195c9c7avboxsync <link rel="stylesheet" type="text/css" href="/build/base/base-min.css">
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync <style type="text/css">
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync .container {
45e9809aff7304721fddb95654901b32195c9c7avboxsync background-color: #ccc;
45e9809aff7304721fddb95654901b32195c9c7avboxsync padding: 20px;
45e9809aff7304721fddb95654901b32195c9c7avboxsync margin: 10px 0;
45e9809aff7304721fddb95654901b32195c9c7avboxsync border-width: 1px;
45e9809aff7304721fddb95654901b32195c9c7avboxsync border-style: solid;
45e9809aff7304721fddb95654901b32195c9c7avboxsync border-color: #ccc;
45e9809aff7304721fddb95654901b32195c9c7avboxsync }
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync .container.hover {
45e9809aff7304721fddb95654901b32195c9c7avboxsync background-color: #fc0;
45e9809aff7304721fddb95654901b32195c9c7avboxsync }
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync .container ul {
45e9809aff7304721fddb95654901b32195c9c7avboxsync list-style: none;
45e9809aff7304721fddb95654901b32195c9c7avboxsync padding: 10px;
45e9809aff7304721fddb95654901b32195c9c7avboxsync margin: 0;
45e9809aff7304721fddb95654901b32195c9c7avboxsync background-color: #333;
45e9809aff7304721fddb95654901b32195c9c7avboxsync }
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync .container ul li {
45e9809aff7304721fddb95654901b32195c9c7avboxsync margin: 10px;
45e9809aff7304721fddb95654901b32195c9c7avboxsync padding: 1px;
45e9809aff7304721fddb95654901b32195c9c7avboxsync background-color: #999;
45e9809aff7304721fddb95654901b32195c9c7avboxsync border-width: 1px;
45e9809aff7304721fddb95654901b32195c9c7avboxsync border-style: solid;
45e9809aff7304721fddb95654901b32195c9c7avboxsync border-color: #999;
45e9809aff7304721fddb95654901b32195c9c7avboxsync }
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync .container ul li.hover {
45e9809aff7304721fddb95654901b32195c9c7avboxsync background-color: #ff6;
45e9809aff7304721fddb95654901b32195c9c7avboxsync }
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync .container ul li em {
45e9809aff7304721fddb95654901b32195c9c7avboxsync display: block;
45e9809aff7304721fddb95654901b32195c9c7avboxsync margin: 10px;
45e9809aff7304721fddb95654901b32195c9c7avboxsync padding: 5px;
45e9809aff7304721fddb95654901b32195c9c7avboxsync background-color: #666;
45e9809aff7304721fddb95654901b32195c9c7avboxsync }
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync .outline,
45e9809aff7304721fddb95654901b32195c9c7avboxsync .container ul li.outline {
45e9809aff7304721fddb95654901b32195c9c7avboxsync border-color: #f00;
45e9809aff7304721fddb95654901b32195c9c7avboxsync }
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync .container.focus {
45e9809aff7304721fddb95654901b32195c9c7avboxsync background-color: blue;
45e9809aff7304721fddb95654901b32195c9c7avboxsync }
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync </style>
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync <script type="text/javascript" src="/build/yui/yui.js"></script>
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync <script type="text/javascript">
45e9809aff7304721fddb95654901b32195c9c7avboxsync YUI({ filter: 'raw' }).use('event-custom', 'event', 'node-style', function (Y) {
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync var onContainerMouseEnter = function (event) {
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync if (event.currentTarget == this) {
45e9809aff7304721fddb95654901b32195c9c7avboxsync this.addClass("hover");
45e9809aff7304721fddb95654901b32195c9c7avboxsync }
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync };
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync var onContainerMouseLeave = function (event) {
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync if (event.currentTarget == this) {
45e9809aff7304721fddb95654901b32195c9c7avboxsync this.removeClass("hover");
45e9809aff7304721fddb95654901b32195c9c7avboxsync }
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync };
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync var onLIMouseEnter = function (event) {
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync if (event.container.get("id") == "container-1") {
45e9809aff7304721fddb95654901b32195c9c7avboxsync this.addClass("hover");
45e9809aff7304721fddb95654901b32195c9c7avboxsync }
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync };
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync var onLIMouseLeave = function (event) {
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync if (event.container.get("id") == "container-1") {
45e9809aff7304721fddb95654901b32195c9c7avboxsync this.removeClass("hover");
45e9809aff7304721fddb95654901b32195c9c7avboxsync }
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync };
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync var addContainerOutline = function (event, className) {
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync event.currentTarget.addClass(className);
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync };
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync var removeContainerOutline = function (event) {
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync event.currentTarget.removeClass(this);
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync };
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync var addLIOutline = function (event, className) {
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync event.currentTarget.addClass(className);
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync };
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync var removeLIOutline = function (event) {
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync event.currentTarget.removeClass(this);
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync };
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync var setLIColor = function (event) {
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync this.setStyle("color", "#fff");
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync };
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync var removeLIColor = function (event) {
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync this.setStyle("color", "");
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync };
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync var handle1 = Y.on("mouseenter", onContainerMouseEnter, "#container-1");
45e9809aff7304721fddb95654901b32195c9c7avboxsync var handle2 = Y.on("mouseleave", onContainerMouseLeave, "#container-1");
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync var handle3 = Y.on("mouseenter", addContainerOutline, "#container-1", Y, "outline");
45e9809aff7304721fddb95654901b32195c9c7avboxsync var handle4 = Y.on("mouseleave", removeContainerOutline, "#container-1", "outline");
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync var handle5 = Y.on("mouseenter", setLIColor, "#container-1 li");
45e9809aff7304721fddb95654901b32195c9c7avboxsync var handle6 = Y.on("mouseleave", removeLIColor, "#container-1 li");
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync var handle7 = Y.delegate("mouseenter", onLIMouseEnter, "#container-1", "li");
45e9809aff7304721fddb95654901b32195c9c7avboxsync var handle8 = Y.delegate("mouseleave", onLIMouseLeave, "#container-1", "li");
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync var handle9 = Y.delegate("mouseenter", addLIOutline, "#container-1", "li", Y, "outline");
45e9809aff7304721fddb95654901b32195c9c7avboxsync var handle10 = Y.delegate("mouseleave", removeLIOutline, "#container-1", "li", "outline");
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync Y.on("click", function () {
45e9809aff7304721fddb95654901b32195c9c7avboxsync
45e9809aff7304721fddb95654901b32195c9c7avboxsync handle1.detach();
45e9809aff7304721fddb95654901b32195c9c7avboxsync handle2.detach();
45e9809aff7304721fddb95654901b32195c9c7avboxsync handle3.detach();
45e9809aff7304721fddb95654901b32195c9c7avboxsync handle4.detach();
handle5.detach();
handle6.detach();
handle7.detach();
handle8.detach();
handle9.detach();
handle10.detach();
}, "#remove-listeners");
});
</script>
</head>
<body>
<h1>MouseEnter and MouseLeave Event Tests</h1>
<ul>
<li>The background color of the <code>div</code> element should turn
orange and have a red outline when you move the mouse over it.</li>
<li>The background color of each <code>li</code> should change to yellow
when you mouse over it and have a red outline.</li>
</ul>
<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>
</body>
</html>