Hover/Active/Focus states

[jacobdubail]

Great project! I'm using it for a new site right now.

Wondering what your prescribed approach is for handling pseudo class (states) for component parts:

@include component(figure) {
  ...
  @include part(caption) {
    ...
    opacity: 0;
  }

  &:hover .figure__caption {
    opacity: 1;
  }
}

That's the only way I can figure out to do it, but seems counter-productive.

Thanks!

[geddski]

Ah you were super close! Just embed the &:hover inside the part and you're good to go. Here's an example: http://codepen.io/geddesign/pen/yyLOMq

[jacobdubail]

Almost. I want the hover to be attached to the component and change the style of the part. Does that make sense?

http://codepen.io/jacobdubail/pen/KwwrRY

So, when I hover the parent element (component), I want the child element (part) to do stuff.

[meltedlilacs]

I am having this same issue.

[jacobdubail]

Hey @geddski, we're almost done with this issue. Mind taking a look at my comment above: https://github.com/geddski/csstyle/issues/24#issuecomment-64001335 Thanks!

[geddski]

Oh gotcha. Yeah that's lame having to write out the concatenated selector manually. Let me see if there's a better way.

[geddski]

Alright. So with sass you can move the & to the end of the selector and it will make it apply to the parent context. So a simple :hover & {...} will do the trick. Updated example, showing it working even with deeply nested parts: http://codepen.io/geddesign/pen/QwGErb

I should add this to the docs. Thanks!

[geddski]

I added an FAQ to the readme and included this.

[jacobdubail]

Thanks @geddski!

That's pretty close, but the hover selector is printed like this: :hover .capacitor__flux, which means when I hover the body (or any element) the capacitor_flux updates. That's not quite the intent. We're more interested in the following:

.component:hover .component__part { ... }

Whereas the proposed solution does this:

:hover .component__part { ... }

Thanks again, Jacob

[geddski]

@jacobdubail third time's a charm :) Here's two ways to accomplish it: http://codepen.io/anon/pen/jEVBLw

Which do you like best and think we should recommend for people?

[geddski]

would be cool if I could expose a scoped $component variable as well...

[meltedlilacs]

.class:hover & requires the use of a class. Both this issue as well as this entire project seem to be designed so that no classes will be directly referenced in the sass source. Therefore, I think &:hover & is the better choice.

Just my (unasked for) opinion. Take it or leave it.

[geddski]

fair point

[jacobdubail]

I agree with GabrielD42. Avoiding typing the classname seems like a win. Too bad there isn't a way to grab some kind of $parent variable or &parent or something so instead of: .capacitor:hover & { background: blue; } we could do: &parent:hover & { background: blue; }

Let's consider this closed. Thanks for sticking with it!