This project is archived and is in readonly mode.

#523 ✓ resolved
ksamdev

Morph is not working with CSS children classes

Reported by ksamdev | December 15th, 2008 @ 03:35 PM | in 2.0 (closed)

CSS:

ul.articles {

margin         : 0px;
padding        : 0px;
margin-left    : .3in;
list-style-type: none;

}

ul.articles li {

padding-left: 0.1in;

}

ul.articles li.hover {

background-color: #f6f6f6;

}

ul.articles li.normal {

background-color: #fcfcfc;

}

HTML:

  • item 1
  • Item 2

JS: window.addEvent( 'domready', function() { $$( "ul['articles'] > li").each( function( _el) {

_el.set( 'class', 'normal');
_el.set( 'morph', { duration: 'short' });
_el.addEvents({ 
  'mouseover': function() { _el.set( 'class_el.morph( '.hover');  },
  'mouseout' : function() { _el.morph( '.normal'); }
});

}); });

Changing style does not work unless in CSS I replace clases declaration to:

.hover {

background-color: #f6f6f6;

}

.normal {

background-color: #fcfcfc;

}

On the other hand replacing mouseover/out functions with next ones (without effect and with original CSS) works just fine:

  'mouseover': function() { _el.set( 'class', 'hover'); },
  'mouseout' : function() { _el.set( 'class', 'normal'); }

It seems like reason is that Fx.CSS can not find .hover or .normal CSS classes when preparing transition.

Comments and changes to this ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Shared Ticket Bins

People watching this ticket

Pages