Simple CSS hover fails to work. Should everything be with variables then?

Ask us anything How do I?
1

Hey everyone!

I’m encountering some really weird behavior from WeWeb; there’s a place to put custom code both globally and on the page, however, all of my attempts at creating a simple hover behavior to display an icon fails.

I’m not a huge fan of misusing global variables and overloading the page with on mouse enter or mouse leave workflows, especially when attempting to do basic things like changing display “none” to “flex” on hover.

The setup is really simple. There’s a wrapper flexbox with “email-container” class. Within it, there’s another flexbox with an icon, that has an “edit-icon” class. The “edit-icon” class display is “none” by default, and when we hover over the wrapper, we should display that icon. Its as simple as that.

CSS:

<style>

        .email-container:hover .edit-icon {
            display: flex;
        }

</style>

Could anyone explain why WeWeb ignores this? testing this locally works, and I’m sure there’s something I’m missing here with the way WeWeb handles these classes. It just doesn’t make sense to me.

2

And just to highlight; this is likely a bug. Adding an HTML element with the CSS code on the page fixes this issue.

Can anyone from WeWeb update whether there are any mission-critical issues with custom-code running successfully, or whether there are issues with running CSS styling on the section?

I’m super confused. Everything seems to be all backwards lately.

3

The only solution I actually managed to work with is having the HTML element inject the styling. Using the built-in display to set “none” at first fails to render the element, meaning it can never be fetched by the CSS logic.

Using the CSS tab behaves the same way. Its all backwards. I’m not sure why this is happening, but its super confusing. The CSS tab and the display options become redundant on these edge cases.

<style>

        .edit-icon {
            display: none !important;
        }

        .email-container:hover .edit-icon {
            display: flex !important;
        }

</style>

Perhaps there’s a more ‘WeWeb-native’ way to achieve this?

4

Why not just use the State :hover? You can find it above classes and that’s what it’s been designed for. You can enable the “Apply to children” and then the state will be employable also on children of your main item.

1 Like
5

Been bashing my head for an hour or so and forgot to add the Flexbox:hover state on the icon div. DOH!

Thanks again broski, you’re a life saver :heart:

1 Like