Is it possible when mouseover on a button, to change the css properties of the underlying divs at the same time?

In my html page I have a button with two div's inside. The div above contains a menu icon svg, the div below contains the button text. The divs are mandatorily used to place the icon and text in the wanted position.

On mouseover on the button, I want that at the same time:

1. the button text color changes from grey to blue
2. the filter options for the image gets active so that the grey icon changes to blue icon.

Currently I have css definitions like below, that work on mouseover on the button, and on mouseover on the first div (svg) independently.

When I define a filter for the complete button , so that the text and image color changes at the same time when mouseover on the button, also the image background color is filtered. Of course this is unwanted.

Is it possible to achieve my goal only using css?

My html markup:

 <button class="icon-button" @onclick="@(() => { Connect_to_MAE();})">
     <div><img class="svg_icon" src="images/abc.svg" width="36" height="36"></div>
     <div>Connect</div>
 </button>

My CSS:

.icon-button:hover {        
    color: cornflowerblue;  /* changes text color */   
}

.svg_icon:hover {    
    filter: sepia(100%) hue-rotate(190deg) saturate(500%);  /* changes just icon color */
}

Just user hover and change its properties according to your requirements.

/* Default styles for the button */
.icon-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background: transparent; /* Make the background transparent */
    border: none;
    cursor: pointer;
}

.icon-button .button-text {
    color: grey; /* Initial text color */
    font-size: 16px;
    margin-top: 5px;
}

/* Icon filter and hover behavior */
.icon-button .svg_icon {
    transition: filter 0.3s ease, color 0.3s ease;
}

/* On button hover: Change text color and apply icon filter */
.icon-button:hover .button-text {
    color: cornflowerblue; /* Change text color to blue on hover */
}

.icon-button:hover .svg_icon {
    filter: sepia(100%) hue-rotate(190deg) saturate(500%); /* Change icon color */
}

/* If you want smooth transition for both, you can add this to your button */
.icon-button:hover {
    /* Optional: You can add a slight transition to the whole button */
    transition: color 0.3s ease;
}

<button class="icon-button" @onclick="@(() => { Connect_to_MAE();})">
    <div class="icon-container"><img class="svg_icon" src="images/abc.svg" width="36" height="36"></div>
    <div class="button-text">Connect</div>
</button>