On each suggestion card, the image and the title get highlighted on hover independently while triggering the same action. It would be good the highlight to affect the whole card regardless of the items hovered (items with a different action such as the flag should only highlight their local context not the whole thing).
Description
Description
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | leila | T134900 [Epic] Article recommendation to more users | |||
| Resolved | Sabya | T134296 Highlight to affect the whole card |
Event Timeline
Comment Actions
I could think of two ways to achieve this.
- Create a wrapper container for the "image" and "title" divs.
- Use JavaScript. Specifically, jquery .hover()
Is there a preference?
I have another solution **without** satisfying the last requirement (items with a different action such as the flag should only highlight their local context, not the whole thing).
Comment Actions
@Sabya The preference would be to move towards the proposed design available here (slides 10 and 11). In this case I think that means hovering over the card should highlight everything, except for the flag. The flag should have an independent hover effect.
As far as how to achieve this, I like the css solution, but would prefer if it were more explicit in its intent by excluding what shouldn't be affected. For example (pseudo-code):
hover children:not(.classToExclude)
I have a commit that reflects some of this here.
Comment Actions
I have created a pull request:
https://github.com/wikimedia-research/translation-recs-app/pull/48