How to make CSS apply to icon within parent container?

Question

I've been trying to make the icon's background (from Material-UI) the same color as the rest of the list items when hovered over.

Not sure why the CSS does not apply to both the icon and text when the overall class (className= "dd-content-item") is being styled. Any help is appreciated thank you!

CSS:

/*This styling applies to each list element in the dropdown-content*/
.dd-content-item {
    color: #1D3557;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    list-style-type: none;
    cursor: pointer;
    justify-content: center;
    background-color: none;
}

/*Hovering over a list element in the dropdown menu colors it darkly*/
.delete-icon, .archive-icon{
    position: relative;
    top: 6px;
}

.favorite-icon, .tag-icon  {
    position: relative;
    top: 7px;
}

.dd-content-item:hover {
    background-color: #D3EDEE;
}

/*When you hover over the dropdown-content, it is displayed as a block*/
.dd-wrapper:hover .dd-content {
    display: block;
}

Code showing hierarchy in html Image of hover action

Answer 1

What kind of icon are you using? Is it an image or SVG or what? Chances are your image doesn't have a transparent background.

Otherwise, something like this might help;

.dd-content-item:hover,
.dd-content-item:hover .delete-icon,
.dd-content-item:hover .archive-icon,
.dd-content-item:hover .favorite-icon,
.dd-content-item:hover .tag-icon {
    background-color: #D3EDEE;
}

Hard to diagnose or say really as I can't see how those images work or what type of object they are.