RC1 / RC2 backwards compatability for custom CSS

Beta
#1

In Pro 3 etc. for menus / buttons etc. you guys were adding the .x-active class etc. to various elements on hover. It seems like that has been done away with in Pro 4.

Any many instances across many sites I’ve specifically target these classes for hover effects etc. with custom css.

An example on a current development site is that the business has 3 distinct product offerings. The branding utilises three distinct brand colours for the offerings. In the site we’ve targeted the hover colours, active colours and hover effects with custom CSS so that on the various product pages these colours match the brand colours for the product offering.

This obviously makes way more sense than having to manage multiple headers.

Currently most of this CSS has stopped working after upgrading from Pro 3 to Pro 4 RC1 / RC2.

#2

Hi @urchindesign,

I’m sorry, we did end up removing that class and tried to avoid using javascript in general to trigger things the browser can handle natively like :hover. To get the new effects system fully functioning and accounting for the “Link Child Interactions” feature, we got rid of those classes. Imagine hovering on a column with several child elements. It would have been excessive to manage adding/removing the interaction class from multiple elements and introduced risk for things to get out of sync and some elements not having the class added/removed in an idempotent manner.

All that being said, I’ve got a workaround that might help you in the meantime. Try adding this to your Global Javascript.

window.csGlobal.everinit('.x-anchor', function(el) {

  el.addEventListener('mouseenter', function() {
    el.classList.add('x-interactive')
  })

  el.addEventListener('mouseleave', function() {
    el.classList.remove('x-interactive')
  })

})

This will restore x-interactive being toggled with the mouse. However, it’s not compatible with the link child interactions feature. You might also need to adjust CSS selectors to make sure they are strong enough, I’m not sure.

#3

No worries. On the current build it is not a problem for me to change the css. Just going to cause headaches upgrading sites.

I do understand why you did it…

#4

Gotcha, hope it goes well getting them upgraded aside from this issue. Thanks for understanding!