Change div hover background

Question

Change div hover background

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

I can not change the background of the div when I hover over the mouse, in case I want to change the background of the circle when hovering.

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

html css

asked by anonymous 16.01.2016 / 16:13

2 answers

1

When you hover the mouse in div , the icon will have a black background:

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

16.01.2016 / 16:21

PHP - How to send data from a table to a form [closed] Correctly insert data into table

score 2 · Accepted Answer

Just use% css% of the css normally of the element you want:

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

See:

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% w / o you only need to tell what to change, the other information will be captured from the element already styled, in this case it was :hover .