当鼠标悬停在按钮上时是否可以同时更改底层div的css属性？

Question

在我的 html 页面中，我有一个里面有两个 div 的按钮。上面的 div 包含菜单图标 svg，下面的 div 包含按钮文本。 div 强制用于将图标和文本放置在所需的位置。

将鼠标悬停在按钮上时，我希望同时：1）按钮文本颜色从灰色变为蓝色2）图像的过滤器选项变为活动状态，以便灰色图标变为蓝色图标。

目前我有如下的 css 定义，它们分别适用于按钮上的鼠标悬停和第一个 div (svg) 上的鼠标悬停。

当我为整个按钮定义一个过滤器时，当鼠标悬停在按钮上时，文本和图像颜色同时发生变化，图像背景颜色也会被过滤。这当然是不受欢迎的。

仅使用CSS是否可以实现我的目标？

我的html代码：

 <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>

我的CSS代码：

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

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

Answer 1

只需用户将鼠标悬停并根据您的要求更改其属性。

/* 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>