How can I use mouseover to change the background color of a div?

Navigation
1

Hello, I would like to change the background color of a div when you place the cursor on it, how do I do that?

Div in question [HTML]: 

<div class='container2'>
          <div class="MP">
            <img class='iconDetails' style="border: 5px solid #ba3638; width: 70; height: 70; border-radius: 50%;" :src="detalhe.picture" >
          </div><br>
          <h4 style="font-size: 23px;">&nbsp;{{detalhe.name}}</h4>
          <div style="font-size:.6em;"><span style="font-color: #acabab;">&nbsp;&nbsp;&nbsp;{{detalhe.description}}</span><br><br></div>
        </div>
      </div>

[CSS]: 

    body {
  font: 100% Montserrat, sans-serif;
  color: #ba3638; }

.iconDetails {
float:left; 
height:155px;
width:155px;    
} 

.container2 {
    width:100%;
    height:auto;
    padding:1%;
}

h4 {
    margin:0px;
}

span {
    color: #acabab;
}

.MP:hover{
   background-color:#ba3638;
}

The files I give retrieve in js are 5 different profiles, so I would like them to change the color individually.

    
asked by anonymous 21.06.2018 / 00:09

2 answers

2

Face does not work because its element .MP does not have size, altura x largura .

I made a pseudo element and put it in the size that you use in the other element and discounted the width of the border for the circle to be aligned. 

body {
font: 100% Montserrat, sans-serif;
color: #ba3638; }

.iconDetails {
float:left; 
height:155px;
width:155px;    
} 

.container2 {
width:100%;
height:auto;
padding:1%;
}

h4 {
margin:0px;
}

span {
color: #acabab;
}

.mp {
position:relative;
}
.mp:hover::after {
  content:"";
position:absolute;
width:155px;
height:155px;
background-color:red;
top:5px;
left:5px;

border-radius: 50%;
}
  <div class='container2'>
    <div class="mp">
      <img class='iconDetails' style="border: 5px solid #ba3638; width: 70; height: 70; border-radius: 50%;" :src="detalhe.picture" >
    </div><br>
    <h4 style="font-size: 23px;">&nbsp;{{detalhe.name}}</h4>
    <div style="font-size:.6em;"><span style="font-color: #acabab;">&nbsp;&nbsp;&nbsp;{{detalhe.description}}</span><br><br></div>
  </div>
    
21.06.2018 / 00:27
1
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>  
 .classname:hover {
    background-color: black;
    text-align: center;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}
</style> 
</head>
<body>
<div class="classname">
    <h1>This is a Heading</h1>
</div>
</body>
</html>
    
21.06.2018 / 00:18
How to do when checking a checkbox it changes the background color of a table from a td and when descending it returns to its normal color Insert date event into a table if page width is less than certain value