mouseenter.html revision 9cdb1aa8d3a7901f789c2ad7a6ea00e804a9abeb
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp "http://www.w3.org/TR/html4/strict.dtd">
82d0cf8c731b23f6a2fbb31e3e696e629444363eTripp
a75ebc38c1de401b679953a9b87bd323f0f48d02Tripp<html lang="en">
82d0cf8c731b23f6a2fbb31e3e696e629444363eTripp<head>
82d0cf8c731b23f6a2fbb31e3e696e629444363eTripp <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp <title>MouseEnter and MouseLeave Event Tests</title>
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp <link rel="stylesheet" type="text/css" href="/build/reset/reset-min.css">
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp <link rel="stylesheet" type="text/css" href="/build/base/base-min.css">
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp <style type="text/css">
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
82d0cf8c731b23f6a2fbb31e3e696e629444363eTripp .container {
82d0cf8c731b23f6a2fbb31e3e696e629444363eTripp background-color: #ccc;
cec703a844d9691646231634fe709f4ea41d278aTripp padding: 20px;
82d0cf8c731b23f6a2fbb31e3e696e629444363eTripp margin: 10px 0;
82d0cf8c731b23f6a2fbb31e3e696e629444363eTripp border-width: 1px;
8209f3939e32e0e5bde64192267fdaf9db6f4fbcTripp border-style: solid;
8209f3939e32e0e5bde64192267fdaf9db6f4fbcTripp border-color: #ccc;
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp }
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp .container.hover {
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp background-color: #fc0;
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp }
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp .container ul {
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp list-style: none;
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp padding: 10px;
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp margin: 0;
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp background-color: #333;
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp }
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp .container ul li {
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp margin: 10px;
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp padding: 1px;
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp background-color: #999;
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp border-width: 1px;
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp border-style: solid;
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp border-color: #999;
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp }
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp .container ul li.hover {
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp background-color: #ff6;
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp }
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp .container ul li em {
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp display: block;
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp margin: 10px;
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp padding: 5px;
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp background-color: #666;
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp }
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp .outline,
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp .container ul li.outline {
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp border-color: #f00;
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp }
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp .container.focus {
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp background-color: blue;
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp }
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp </style>
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp <script type="text/javascript" src="/build/yui/yui-debug.js"></script>
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp <script type="text/javascript">
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp YUI({
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp base: "/build/",
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp filter: 'debug'
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp }).use('event-custom', 'event', 'node-style', function (Y) {
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp var onContainerMouseEnter = function (event) {
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp if (event.currentTarget == this) {
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp this.addClass("hover");
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp }
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp };
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp var onContainerMouseLeave = function (event) {
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp if (event.currentTarget == this) {
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp this.removeClass("hover");
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp }
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp };
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
8209f3939e32e0e5bde64192267fdaf9db6f4fbcTripp var onLIMouseEnter = function (event) {
8209f3939e32e0e5bde64192267fdaf9db6f4fbcTripp
8209f3939e32e0e5bde64192267fdaf9db6f4fbcTripp if (event.container.get("id") == "container-1") {
8209f3939e32e0e5bde64192267fdaf9db6f4fbcTripp this.addClass("hover");
8209f3939e32e0e5bde64192267fdaf9db6f4fbcTripp }
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp };
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp var onLIMouseLeave = function (event) {
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp if (event.container.get("id") == "container-1") {
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp this.removeClass("hover");
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp }
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp };
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp var addContainerOutline = function (event, className) {
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp event.currentTarget.addClass(className);
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp };
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp var removeContainerOutline = function (event) {
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp event.currentTarget.removeClass(this);
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp };
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp var addLIOutline = function (event, className) {
e393eced613f9b4a5fb6bdd461d0e0bf5064d5ecTripp
event.currentTarget.addClass(className);
};
var removeLIOutline = function (event) {
event.currentTarget.removeClass(this);
};
var setLIColor = function (event) {
this.setStyle("color", "#fff");
};
var removeLIColor = function (event) {
this.setStyle("color", "");
};
var handle1 = Y.on("mouseenter", onContainerMouseEnter, "#container-1");
var handle2 = Y.on("mouseleave", onContainerMouseLeave, "#container-1");
var handle3 = Y.on("mouseenter", addContainerOutline, "#container-1", Y, "outline");
var handle4 = Y.on("mouseleave", removeContainerOutline, "#container-1", "outline");
var handle5 = Y.on("mouseenter", setLIColor, "#container-1 li");
var handle6 = Y.on("mouseleave", removeLIColor, "#container-1 li");
var handle7 = Y.delegate("mouseenter", onLIMouseEnter, "#container-1", "li");
var handle8 = Y.delegate("mouseleave", onLIMouseLeave, "#container-1", "li");
var handle9 = Y.delegate("mouseenter", addLIOutline, "#container-1", "li", Y, "outline");
var handle10 = Y.delegate("mouseleave", removeLIOutline, "#container-1", "li", "outline");
Y.on("click", function () {
handle1.detach();
handle2.detach();
handle3.detach();
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>