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

Asked

Viewed 651 times

1

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

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 in js are 5 different profiles, so I would like them to change the color individually.

javascript html css hover css-hover

  • As @hugocsl said, it might not work because the size has not been declared!

2 answers

2


Guy doesn’t work because his element .MP has no size, altura x largura.

I made a pseudo element and I put in it the size you use in the other element and I discounted the width of the border so the circle stay 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>

  • 1

    Both solutions worked, but thanks for the size solution

  • Thanks @Joãovitor sometimes when the element has no size it seems that it does not accept some properties. But sometimes when this size-less element has another size inside it behaves differently. So it’s good to always keep in mind some basics of CSS, good luck with the project. tmj

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>

  • It didn’t work, buddy

  • Edited, test in an html editor.

  • It worked here, thanks

Browser other questions tagged javascript html css hover css-hover

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