编辑3

Question

我最近被要求在一些网站上工作。其中一个网站希望“更具互动性”，他们向我展示了他们想要效仿的网站。

我不太喜欢编写自己的脚本，特别是关于DHTML，所以我使用MooTools来处理更多的接口更改。

在我的HTML代码中，我有两个Div标签，我希望它发生在鼠标悬停一个时，它缩小另一个并扩展你正在查看的那个，但没有我尝试附加的事件是完全开火（没有任何反应，控制台中没有任何内容）。

这是我的HTML，我只是使用从他们的网站下载的股票mootools。

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Cnergi - Splash </title>
        <link rel="stylesheet" href="main.css" type="text/css" />
        <script type="text/javascript" src="mootools.js"></script>
        <script type="text/javascript">
            document.addEvent('domready',function(){

                $('employee').set('opacity', 0.5).addEvents({
                    mouseenter: function(){
                      // This morphes the opacity and backgroundColor
                      this.morph({
                        'opacity': 0.6,
                        'background-color': '#E79D35'
                      });
                    },
                    mouseleave: function(){
                      // Morphes back to the original style
                      this.morph({
                        opacity: 0.5,
                        backgroundColor: color
                      });
                    }
                  });

            });
        </script>
    </head>
    <body>
        <div id="wrapper">

            <div class="employee" id="employee">
                Employee test
            </div>
            <div class="client" id="client">
                Client Test
            </div>

        </div>
    </body>
</html>

问题的进一步描述

基本上，如果我直接从'domready'函数调用变形，它可以工作，但是应该来自mouseenter的事件调用（也尝试鼠标悬停，甚至点击。没有工作）永远不会发生。没有错误被抛出。老实说，我很困惑，我以前从未遇到过这个问题。

有什么想法吗？

修改

目前正在尝试此代码，但仍未显示任何内容。

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <link rel="stylesheet" href="main.css" type="text/css" />
        <script type="text/javascript" src="mootools.js"></script>

    </head>
    <body>
        <div id="wrapper">
            <div id="employee" class="employee">
                Something
            </div>
        </div>
        <script type="text/javascript">
            document.addEvent('domready',function(){

                var s = $('employee');
                s.addEvent('click',function(){
                    alert('I was clicked!');
                });

            });//End document.addEvent domready
        </script>
    </body>
</html>

编辑2

与我的样式表声明有关;如果我删除它，事件就会发生。

它实际上似乎是任何造型。我把标签放入文件的那一刻就停止了工作。

“WUT”。是我唯一的回应。

编辑3

我将CSS更改为此，并且可以正常工作。我没有浏览过我之前的CSS文件来弄清楚为什么它不能用它，只是想我会更新所有人。我发布了2个JS小提琴链接，一个用我的基础CSS（请记住这是一个正在进行的工作，我是部分色盲，所以明亮的颜色帮助我看到差异），另一个与CSS下面，运行良好。

总结：今天我了解到CSS可以防止javascript事件被触发。

html, body, body>div{
                height:100%;
            }

            body > div{
                width:900px;
                text-align:left;
                margin:0 auto 0 auto;
                background-color:white;

            }

            body{
                text-align:center;
                background-color:grey;
                padding:0;
            }

            #wrapper{

                position:relative;
                width:inherit;
                height:inherit;
            }

            #footer{
                position:absolute;
                bottom:0px;
                text-align:center;
                width:inherit;
            }

Answer 1

我认为你在后台有一个语法错误：color

this.morph({
    opacity: 0.5,
    backgroundColor: color // is color defined?
});

Answer 2

MooTools domready事件仅适用于window对象 - 这是您工作顺序中的示例：http://jsbin.com/rucaz/1/edit

供参考：http://mootools.net/docs/core/Utilities/DOMReady

MooTools事件没有解雇

HTML

问题的进一步描述

修改

编辑2

编辑3

2 个答案: