0

I have a trashcan icon that is dark gray. When I hover over it, I would like the trashcan icon to turn blue and the background to be a light gray circle.

So far, the background turns light gray, but it is a rectangle, not a circle. Also, the icon is not changing from dark gray to blue.

css:

.trash-icon {
  vertical-align: middle;
  cursor: pointer;
}

.trash-icon:hover {
  background: #e5e9f1;   /* light gray */
  color: #459ae1;        /* blue */
}

icon:

export const DeleteTrashCan = ({ onClickDelete }) => (
  <span className="delete-row-icon" onClick={onClickDelete}>
    <Icon
      className="trash-icon"
      color={IconColor.NEUTRAL_90}    /* dark gray */
      size={IconSize.TWENTY}
      type="trash"
    />
  </span>
)

html:

  <div className="row-delete">
    <DeleteTrashCan onClickDelete={() => handleDelete(index)} /> 
  </div>
Lindsey
  • 61
  • 1
  • 7
  • I'm not aware of your "icon" being valid HTML (it might be a format I'm unaware of, but I would be surprised). Please show us the actual HTML that is being received by the browser – freefaller Jan 25 '22 at 17:02
  • Sorry, still doesn't look like valid HTML. Are you sure that is being sent to the browser? – freefaller Jan 25 '22 at 17:19
  • Looks like icon is for React. Do you work with it? If yes, edit your tag. And maybe you will get some inspiration in the simillar question: https://stackoverflow.com/questions/56636280/how-to-style-react-icons ....if no, choose some svg format or some special fonts.. – Lucie Jan 28 '22 at 19:18

0 Answers0