I'm new to web development and I just can't seem to figure out how to change the color of my text when hovered and make it stay changed. Currently I have this:
.main{
color: white;
font-size: 20px;
}
.main:hover{
animation: textchange 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@keyframes textchange{
from{
color: white;
}
to {
color:black;
}
}<p class=main>
Lorem ipsum dolor sit amet
</p>I understand why the color doesn't stay black after unhovered but I still don't know how to approach this. I'm not even sure if this is even possible without javascript.
You should use animation-fill-mode: forwards;
function enter() {
const main = document.getElementById('main-with-javascript');
main.style.animation = 'textchange 4s cubic-bezier(0.165, 0.84, 0.44, 1)';
main.style.animationFillMode = 'forwards';
}
function leave() {
const main = document.getElementById('main-with-javascript');
main.style.animation = 'textchangeReverse 4s cubic-bezier(0.165, 0.84, 0.44, 1)';
}#main-with-javascript {
color: #dddddd;
font-size: 20px;
}
.main {
color: #dddddd;
font-size: 20px;
animation: textchangeReverse 4s cubic-bezier(0.165, 0.84, 0.44, 1);
animation-fill-mode: forwards;
}
.main:hover {
animation: textchange 4s cubic-bezier(0.165, 0.84, 0.44, 1);
/*Let the element retain the style values from the last keyframe when the animation ends*/
animation-fill-mode: forwards;
}
@keyframes textchange {
from {
color: #dddddd;
}
to {
color: black;
}
}
@keyframes textchangeReverse {
from {
color: black;
}
to {
color: #dddddd;
}
}<h2>with css</h2>
<p class='main'>
Lorem ipsum dolor sit amet
</p>
<hr/>
<h2>with css and javasctipt</h2>
<p id='main-with-javascript' onmouseenter='enter()' onmouseleave='leave()'>
Lorem ipsum dolor sit amet
</p>Add this to css but
p.black {
color: black;
}
You need to use javascript for that
document.querySelector(".main").addEventListener("mouseover", function(e) {
this.classList.add("black");
})
.main{
color: rgb(206, 37, 37);
font-size: 20px;
}
.main:hover{
animation-name: textchange;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes textchange{
0%{
color: rgb(0, 0, 0);
}
100%{
color:black;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="github.css">
</head>
<body>
<main>
<p class=main>
Lorem ipsum dolor sit amet
</p>
</main>
</body>
</html>You need to set the animation iteration count to infinite and inside the key frames for 0% set the color to black and for 100% set the color black also.