Home/ Questions/Q 3999324
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T07:38:34+00:00

this is my first post on SO :-) I’m having a problem getting MooTools

  • 0

this is my first post on SO 🙂

I’m having a problem getting MooTools to morph to a CSS class. I’m pretty sure I’ve followed the docs and demo, but when I call myElement.morph('.hover') it will not morph to the .hover class. My setup is as follows:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    <script src='mootools.js' type="text/javascript"></script>
    <script src='hover.js' type="text/javascript"></script>
</head>
<body>
    <div class="btn"></div>
</body>
</html>

hover.js:

window.addEvent('domready', function() {
    var myElement = $$('.btn')[0];
    myElement.morph('.hover');                           // This doesn't work
    //myElement.morph({ 'background-color': '#009' });   // This works
    //myElement.set('class', 'hover');                   // This also works
});

style.css:

.btn {
    width: 200px;
    height: 100px;
    background-color: #999;
}
.hover {
    width: 200px;
    height: 100px;
    background-color: #009;
}

I found someone with a related problem, but .hover is the full name of my selector…so I’m stumped.

Thanks in advance for any help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    this does not work because there’s a bug: https://mootools.lighthouseapp.com/projects/2706/tickets/1063-no-class-morphing-with-13-no-compat

    milestone for fix: 1.3.1 (so very soon) – or you can get the patch to Element.Style.js from the 1.3.1 branch on github.

    • 0