Início / coding / Perguntas / 79184374
Accepted
Mdarende
Asked: 2024-11-13 18:08:36 +0800 CST

É possível, ao passar o mouse sobre um botão, alterar as propriedades CSS dos divs subjacentes ao mesmo tempo?

  • 772

Na minha página html, tenho um botão com duas div's dentro. A div acima contém um ícone de menu svg, a div abaixo contém o texto do botão. As divs são obrigatoriamente usadas para colocar o ícone e o texto na posição desejada.

Ao passar o mouse sobre o botão, quero isso ao mesmo tempo:

  1. a cor do texto do botão muda de cinza para azul
  2. as opções de filtro para a imagem ficam ativas para que o ícone cinza mude para um ícone azul.

Atualmente, tenho definições de CSS como as abaixo, que funcionam no mouseover do botão e no mouseover do primeiro div (svg) de forma independente.

Quando defino um filtro para o botão completo, de modo que a cor do texto e da imagem mudem ao mesmo tempo quando o mouse passar sobre o botão, também a cor de fundo da imagem será filtrada. Claro que isso é indesejado.

É possível atingir meu objetivo usando apenas CSS?

Minha marcação 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>

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

  1. Best Answer

    Basta passar o mouse sobre ele e alterar suas propriedades de acordo com suas necessidades.

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

relate perguntas