主页 / coding / 问题 / 79184374
Accepted
Mdarende
Asked: 2024-11-13 18:08:36 +0800 CST

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

  • 772

在我的 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 */
}
html

1 个回答

  1. Best Answer

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

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

    • 1

相关问题