Javascript 简单原型事件问题

我只是在学习原型，我很难找到好的文档/教程，我认为这个问题应该很容易解决，但我就是无法让它工作。我希望在一个div上有悬停效果，直到它被点击，然后在它被点击后，我希望它有正常的行为。这就是我到目前为止所做的：

document.observe("dom:loaded", function() {
        $("evtTarget").observe("mouseover", highlight);
        $("evtTarget").observe("mouseout", highlight);

        $("evtTarget").observe("click", function(evt) {
            $("evtTarget").stopObserving("mouseover", highlight);
            $("evtTarget").stopObserving("mouseout", highlight);
        });


    });

    function highlight(evt) {
        $("evtTarget").toggleClassName("highlighted");        
    }

当我使用这段代码时，我的div不会突出显示，但我无法找出我做错了什么。任何帮助或建议都将不胜感激

谢谢

编辑：这是我的JSFIDLE版本： 问题可能在其他地方

• 页面中是否有ID为evtTarget的元素
• 您是否记得在页面中包含原型（例如
  

  ---

  好的，谢谢！但当我添加scriptaculous时，它似乎停止工作。我需要脚本。有什么想法吗？谢谢！！！