Ajuda Hover CSS

23/07/2019

Fala galera, preciso de uma ajuda.
Acho que � simples, mas ta enrolado aqui :(

Tenho um bot�o em CSS, preciso trocar a cor de BG e conte�do ao mesmo tempo (hover).
Desde j�, agrade�o!

Segue o c�digo:

<style>

.rectangle-pass {
height: 80px;
width: 310px;
border: 1px solid #B8B8B8;
border-radius: 6px;
background-color: #EEEEEE;
float:left;
margin:16px 0 0 0;
}

.rectangle-pass span {
height: 25px;
width: 48px;
color: #10004F;
font-family:latam-icons-regular;
font-size: 40px;
line-height: 25px;
float:left;
margin:28px 0 0 16px;
}

.rectangle-pass p {
color: #303030;
font-family: Trebuchet MS,Arial,sans-serif;
font-size: 18px;
line-height: 24px;
float:left;
text-align:left;
margin:30px 0 0 8px;
}

</style>

<a href="#" class="item-link">
<div class="rectangle-pass">
<span>FFP006</span>
<p>Extrato</p>
</div>
</a>

Lima

Curtir t�pico + 0

Responder

Posts

23/07/2019

Jothaz

Para mudar a cor de fundo use:

            <style>
                .rectangle-pass:hover {
                       color: red;
                       background-color: green;
                  }
            </style>

Para mudar o conte�do use onmouseover:

[code=js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<style>

.rectangle-pass {
height: 80px;
width: 310px;
border: 1px solid #B8B8B8;
border-radius: 6px;
background-color: #EEEEEE;
float:left;
margin:16px 0 0 0;
}

.rectangle-pass span {
height: 25px;
width: 48px;
color: #10004F;
font-family:latam-icons-regular;
font-size: 40px;
line-height: 25px;
float:left;
margin:28px 0 0 16px;
}

.rectangle-pass p {
color: #303030;
font-family: Trebuchet MS,Arial,sans-serif;
font-size: 18px;
line-height: 24px;
float:left;
text-align:left;
margin:30px 0 0 8px;

}
.rectangle-pass:hover {
color: red;
background-color: green;
}
</style>
</head>
<body>
<a href="#" class="item-link" id="meu_conteudo" onmouseover="mudar('novo conteudo')">
<div class="rectangle-pass">
<span>FFP006</span>
<p>Extrato</p>
</div>
</a>

<script>
function mudar(valor) {
document.getElementById('meu_conteudo').innerHTML = valor;
}
</script>
</body>
</html>
][/code]

Certamente o exemplo acima n�o ir� solucionar seu problema, mas lhe dar� uma ideia de como pode ser feito.

Responder

Gostei + 0