0

Minha dúvida é a seguinte: tenho uma coluna com uma texto e um ícone, preciso que quando o mouse ficar em cima da coluna tanto o texto quanto o ícone mudem de cor, segue o HTML:

.features .round-icon {
  border: 4px solid #1c1c1c;
  border-radius: 50%;
  display: table;
  height: 100px;
  width: 100px;
  font-size: 3.6rem;
}

.features .round-icon span {
  color: #1c1c1c;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#numeros-coluna2:hover{background-color:#ffc600;}
<div class="row features">
  <div class="medium-2 columns border-direita" id="numeros-coluna2">
    <span class="numeros">5MIL</span>
    <div class="round-icon medium-offset-2">
      <span class="fi-dollar"></span>
    </div>
  </div>
</div>

6
  • 1
    Rodolpho, pode adicionar a pergunta o CSS ?
    – David
    Commented 16/03/2017 às 14:31
  • 1
    Basta aplicar o hover ao elemento pai.
    – Woss
    Commented 16/03/2017 às 14:33
  • Aplica o hover a essa div > #numeros-coluna2 Commented 16/03/2017 às 14:34
  • Sim, esse div esta com o hover, texto muda a cor, mas o icone nao Commented 16/03/2017 às 14:36
  • Não está com hover no CSS que você postou.
    – Woss
    Commented 16/03/2017 às 14:42

2 Respostas 2

0

O que você pode fazer é selecionar devidamente os elementos filhos a partir do evento hover do elemento pai. Por exemplo, se você deseja alterar tanto a cor da fonte quanto a da borda dos elementos filhos, pode fazer:

.features .round-icon {
  border: 4px solid #1c1c1c;
  border-radius: 50%;
  display: table;
  height: 100px;
  width: 100px;
  font-size: 3.6rem;
}

.features .round-icon span {
  color: #1c1c1c;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.features .columns:hover span {
  color: red;
}

.features .columns:hover div {
  border-color: red;
}
<div class="row features">
  <div class="medium-2 columns border-direita" id="numeros-coluna2">
    <span class="numeros">5MIL</span>
    <div class="round-icon medium-offset-2">
      <span class="fi-dollar">$</span>
    </div>
  </div>
</div>

1
  • Valeu Anderson, works like a charm! HAHA Commented 16/03/2017 às 14:57
0
<style>
  .features .round-icon {
    border: 4px solid #1c1c1c;
    border-radius: 50%;
    display: table;
    height: 100px;
    width: 100px;
    font-size: 3.6rem;
  }

  .features .round-icon span {
    color: #1c1c1c;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }

  .features .columns:hover .numeros {
      color: #F00;
  }

  .features .columns:hover .round-icon span {
      color: #F00;
  }

  .features .columns:hover .round-icon {
    border: 4px solid #F00;
  }
</style>

<div class="row features">
  <div class="medium-2 columns border-direita" id="numeros-coluna2">
    <span class="numeros">5MIL</span>
    <div class="round-icon medium-offset-2">
      <span class="fi-dollar"></span>
    </div>
  </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .