Expenses-Chart-Component Challenge

Community feedback

• 

  Joshua Hellard•545

  @jhellardPosted over 2 years ago

  I assume you are talking about getting the color to change on hover, using .spn:hover in your CSS would allow you to set the background-color while hovering, no need for any Javascript.

  The responsiveness is pretty good, I would set a breakpoint for the '2.4% from last month' text as it's getting forced to a new line when you get to the smaller screen sizes.

  Marked as helpful

  1

  ---

  

  Nate Pañares•150

  @ShinjiX-WebPosted over 2 years ago

  @jhellard yeah, thanks. Well, I did forget that pseudo-class hover though. I am also referring to the price that would appear above the bars when you hover it through them (active state). But, hey, thanks for the feedback. I appreciate it.

  1

  

  Joshua Hellard•545

  @jhellardPosted over 2 years ago

  @ShinjiX-Web You could try using either ::before or ::after and absolutely positioning a div with the price relative to the bar and have a hover state on that setting the visibility from hidden to visible.

  Marked as helpful

  1

  

  Nate Pañares•150

  @ShinjiX-WebPosted over 2 years ago

  @jhellard I just added this instead. Thanks for the help!

  span[data-descr] { position: relative; cursor: pointer; }

  span[data-descr]:hover::after, span[data-descr]:focus::after { content: attr(data-descr); cursor: pointer; position: absolute; left: 0; top: -50px; min-width: 30px; border: 1px #aaaaaa solid; border-radius: 8px; background-color: black; padding: 9px; color: whitesmoke; font-size: 14px; z-index: 1; }

  1

  

  Joshua Hellard•545

  @jhellardPosted over 2 years ago

  @ShinjiX-Web Awesome! Make sure to update your solution so others can see the changes!

  0