Can you use elm-ui or elm-css to make a child element display when hovering over its parent element?

Learn
1

Essentially, can this css be represented in either library:

.child {
  display: none;
}

.parent:hover .child {
  display: block;
}

I’ve used elm-ui a lot, but haven’t used elm-css at all, but in looking at the docs in both cases, it seems like hover rules can only be applied to the element you’re styling? I can’t figure out a way to refer to if a parent is being hovered over.

1 Like
2

In elm-css you can do this using the Css.Global module.

We use elm-css, but we prefer to do this with plain CSS. We have a global CSS file with:

.displayOnParentHover {
  display: none;
}
*:hover > .displayOnParentHover {
  display: block;
}

And then add class "displayOnParentHover" to the element.

4 Likes
3

As hovering over elements is a behavior I prefer to handle that in elm

4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.