Expenses chart component - Retrieving data from the JSON file

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Lucas, I see that in your code your :hover is given to the .column class, which is why the amount tag shows up when you hover over the whole column. If you want the amount to show up when hovering over the bar only, then you'll have to put :hover on the bar, as in .bar:hover. However, this would only work if .bar is either the parent or the first sibling in relation to .money. You might have tried putting the hover on .bar already and maybe it didn't work.

  From what I see in your JS file, the structure right now is kind of like this:

  <div class="column">
    <div class="money"></div>
    <div class="bar"></div>
    <div class="day"></div>
  </div>
  

  You can see that .bar and .money are siblings, and .money is the first child of the .column div, which means that .bar. would not be able to target .money for styling (it's like firstborn privileges, as in, only the first child gets to call the shots). To make this work, you'd have to change the order of the divs in your JS so that .bar can be the first child, and that way, the hover on bar would be able to affect your money div:

    columnBar.appendChild(displayBar)    // .bar
    columnBar.appendChild(amountBar)  // .money
    columnBar.appendChild(dayBar) //.amount
  

  I see that .money is not a position:absolute element; that means you'll have to use the flexbox properties on the .column parent to reorder the child elements; after that, you can add the hover:

  .money {
    order: 1;
  }
  // you may not need the two below, you can test it out and see
  .bar {
    order: 2;
  }
  .day {
    order: 3;
  }
  // then add the hover here to select .money
  .bar:hover ~ .money {
    visibility: visible;
  }
  

  It's a fair bit of code, but you can try it and see whether you can use hover on the bar instead :)

  Marked as helpful

  1