在网页DIV中设置一首诗词（要求有诗的标题和作者），在标题上绑定双击事件，每一次双击标题时标题放大4px，在双击3次后解除绑定；在诗词第一行上使用one()函数绑定单击事件，单击时设置整个诗词正文字号设为24PX；在诗词最一后行上设置hover()函数，鼠标进入时页面背景设为浅蓝色（颜色自定义），鼠标离开时设置背景为浅绿色（颜色自定义）；在页面空白处使用toggle（）函数，单击时诗词正文在三种颜色之间切换。

以下是代码实现：

HTML部分：

<div id="poem">
  <h1 id="title">《静夜思》- 李白</h1>
  <p>床前明月光，疑是地上霜。</p>
  <p>举头望明月，低头思故乡。</p>
  <p id="end">-- 李白</p>
</div>

CSS部分：

#poem {
  width: 500px;
  margin: auto;
  font-size: 18px;
  text-align: center;
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ccc;
}

#title {
  cursor: pointer;
}

#end:hover {
  background-color: #90ee90;
}

#poem:hover {
  background-color: #add8e6;
}

JavaScript部分：

$(function() {
  var count = 0;
  $("#title").dblclick(function() {
    $(this).css("font-size", "+=4px");
    count++;
    if (count === 3) {
      $(this).off("dblclick");
    }
  });

  $("p:first").one("click", function() {
    $("#poem").css("font-size", "24px");
  });

  $("#end").hover(function() {
    $(this).css("background-color", "#87cefa");
  }, function() {
    $(this).css("background-color", "#fff");
  });

  $("body").click(function() {
    $("#poem").toggle(function() {
      $(this).css("color", "red");
    }, function() {
      $(this).css("color", "blue");
    }, function() {
      $(this).css("color", "green");
    });
  });
});