1

Olá, gostaria de mudar a cor do background de uma div quando coloca o cursor nela, como faço isso?

Div em questão [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;
}

Os arquivos que dou retrieve no js são 5 profiles diferentes, sendo assim gostaria que eles mudassem a cor individualmente.

1
  • Como o @hugocsl falou, pode não funcionar pois o tamanho não foi declarado!
    – Nithogg
    Commented 20/06/2018 às 22:45

2 Respostas 2

2

Cara não funciona pq seu elemento .MP não tem tamanho, altura x largura.

Eu fiz um pseudo elemento e coloquei nele o tamanho que vc usa no outro elemento e descontei a largura da borda pro circulo ficar alinhado.

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>

2
  • 1
    Ambas as soluções funcionaram, mas obrigado pela solução do tamanho
    – Nithogg
    Commented 20/06/2018 às 22:42
  • Valeu @JoãoVitor as vezes quando o elemento não tem tamanho parece que ele não aceita algumas propriedades. Mas as vezes quando esse elemento sem tamanho tem um outro que tenha tamanho dentro ele se comporta de forma diferente. Por isso é bom sempre ter em mente alguns fundamentos do CSS, boa sorte com o projeto. tmj
    – hugocsl
    Commented 20/06/2018 às 22:49
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>
3
  • Não funcionou, amigo
    – Nithogg
    Commented 20/06/2018 às 22:24
  • Editado, teste em um editor de html. Commented 20/06/2018 às 22:30
  • Funcionou aqui, valeu
    – Nithogg
    Commented 20/06/2018 às 22:42

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 .