Is there a way to make the ":hover" stay?

Question

Is there a way to make the :hover comment stay even after you leave the mouse from being over it?

Example of something that doesn't work because of it:

#SS {
  width: 300px;
  height: 300px;
  background-image: url(https://media1.tenor.com/images/a8479ab2587f60773c0032ada0c85d3b/tenor.gif?itemid=5751040);
  background-size: cover;
  margin: auto;
}

#SS:hover {
  transform: translate(500px);
}

#SS p {
  text-align: center;
  font-size: 140%;
  font-weight: bold;
  color: red;
  text-shadow: 0 0 5px black;
  padding-top: 265px;
}

<div id="SS">
  <p>You will never catch me!!!</p>
</div>

I'm new to this so I have started to learn html and css first, but I would love to see an answer with js, because I want to learn it as soon as I finish with css — Elo, Jan 10 '20 at 04:56
It's possible with css only but depends on the user case, you have an answer for it here: https://stackoverflow.com/questions/17100235/make-css-hover-state-remain-after-unhovering — tosi, Jan 10 '20 at 04:59

tosi · Accepted Answer · 2020-01-10T05:10:57.480

3

Here's a way to do it with JS, I'd suggest using this one:

var ss = document.getElementById('SS');

ss.addEventListener('mouseover', function() {
  //ss.classList.add('SS-hover');
  ss.classList.toggle('SS-hover');
})

#SS {
  width: 300px;
  height: 300px;
  background-image: url(https://media1.tenor.com/images/a8479ab2587f60773c0032ada0c85d3b/tenor.gif?itemid=5751040);
  background-size: cover;
  margin: auto;
}

.SS-hover {
  transform: translate(500px);
}

#SS p {
  text-align: center;
  font-size: 140%;
  font-weight: bold;
  color: red;
  text-shadow: 0 0 5px black;
  padding-top: 265px;
}

<div id="SS">
  <p>You will never catch me!!!</p>
</div>

edited Jan 10 '20 at 05:10

answered Jan 10 '20 at 05:05

tosi

611
9
24

Is there a way to make it go back so every time you try to touch it will run away from you? – Elo Jan 10 '20 at 05:09
You can use `classList.toggle` for that, updated the code in the answer – tosi Jan 10 '20 at 05:11

score 1 · Answer 2 · answered Jan 10 '20 at 05:12

You can achieve this in various ways. for example: //Html

  <div id="SS" onmouseover="translateSS(this)">
      <p>You will never catch me!!!</p>
  </div>

//JS

 function translateSS(x) {
            x.style.transform = "translate(500px)";
            }

Is there a way to make the ":hover" stay?

2 Answers2