Hover in two Ivs within the same column

Asked

Viewed 126 times

0

My question is this: I have a column with a text and an icon, I need that when the mouse is on top of the column both the text and the icon change color, follow the 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>

css
  • 1

    Rodolpho, you can add the question CSS ?

  • 1

    Just apply the hover to the parent element.

  • Applies the hover to that div > #numeros-coluna2

  • Yes, that div is with the Hover, text changes the color, but the icon does not

  • Not with the CSS you posted.

  • added, in case the 5MIL and icone need to be white

Show 1 more comment

2 answers

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>

0


What you can do is properly select the child elements from the event hover of the parent element. For example, if you want to change both the font color and the border of the child elements, you can do:

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

  • Thanks Anderson, Works like a Charm! HAHA

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.