0

Não consigo alterar o background da div quando passar o mouse em cima, no caso quero mudar o background do círculo quando der hover.

<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;
}

2 Respostas 2

2

Basta usar o :hover do css normalmente do elemento que desejas:

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

Veja:

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>

No :hover você só precisa informar o que deverá mudar, as outras informações serão capturados do elemento já estilizado, no caso foi a background: yellow.

0
1

Quando passar o mouse na div, o ícone ficará com o fundo preto:

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

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 .