How do I make it so when I hover over my text it changes color and the color stays changed?-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

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");
})

CodePudding user response：

.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.

CodePudding user response：

Use a transition trick like below:

.main {
  color: white;
  font-size: 20px;
  transition: color 9999s; /* super big value here */
}

.main:hover {
  transition: color 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  color: #000;
}

<p class=main>
  Lorem ipsum dolor sit amet
</p>