Change div background on Hover

Question

I can’t change the background of the div when I hover over, in case I want to change the background of the circle.

<div class="col m3">
                    <div class="center promo">
                        <div class="i-circle">
                            <i class="material-icons">shopping_cart</i>
                        </div>
                        <p class="promo-caption">Compre conosco</p>
                        <p class="light center">Compre nossos produtos</p>
                      </div>
                </div>

i{
    margin: 40px 0;
    color: #CCC;
    font-size: 5rem;
}

.i-circle{
    height:150px;
    width:150px;
    text-align: center;
    padding: 1px;
    border-radius: 50%;
    line-height:150px;
    background:#EEE;
    margin:0 auto 30px;
    display:block;
}

Answer 1

Just use the :hover css of the element you want:

.i-circle:hover{
  background: yellow;
}

Behold:

i {
  margin: 40px 0;
  color: #CCC;
  font-size: 5rem;
}

.i-circle {
  height: 150px;
  width: 150px;
  text-align: center;
  padding: 1px;
  border-radius: 50%;
  line-height: 150px;
  background: #EEE;
  margin: 0 auto 30px;
  display: block;
}

.i-circle {
  height: 150px;
  width: 150px;
  text-align: center;
  padding: 1px;
  border-radius: 50%;
  line-height: 150px;
  background: #EEE;
  margin: 0 auto 30px;
  display: block;
}

.i-circle:hover{
  background: yellow;
}

<div class="col m3">
  <div class="center promo">
    <div class="i-circle">
      <i class="material-icons">shopping_cart</i>
    </div>
    <p class="promo-caption">Compre conosco</p>
    <p class="light center">Compre nossos produtos</p>
  </div>
</div>

In the :hover you just need to inform what should change, the other information will be captured from the already stylized element, in case it was the background: yellow.

Answer 2

When you mouse the div, the icon will be on the black background:

.center.promo:hover .i-circle{
    background-color:#000;
}