Pseudo klasy w JavaScript

pytanie zadane 5 września 2020 w JavaScript przez Antoni2422 Użytkownik (570 p.)

Hej,

Mam problem bo wymyśliłem sobie box-a z dwoma pseudo elementami before i after. Mam do nich style w css, ale po najechaniu myszą mają się one zmienić (after i before mają zniknąć). chciałem to zrobić za pomocą js, ale nie wiem czy się da zdefiniować pseudo klasę w javascript.

Pozdrawiam :)

2 odpowiedzi

odpowiedź 5 września 2020 przez DawidK Nałogowiec (37,910 p.)

Taki efekt chyba łatwiej będzie Ci uzyskać w CSS (wystarczy hover i display:none).

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        div {
            text-align: center;
        }

        span::before {
            content: 'before ';
            color: blue;
        }

        span::after {
            content: ' after';
            color: blue;
        }

        span:hover::after,
        span:hover::before {
            display: none;
        }
    </style>
</head>

<body>
    <div>
        <span>główny element</span>
    </div>
</body>

</html>

komentarz 5 września 2020 przez Antoni2422 Użytkownik (570 p.)

Ok.

Dziękuję za fatygę i szybkość odpowiedzi:)

odpowiedź 6 września 2020 przez VBService Ekspert (253,340 p.)
edycja 6 września 2020 przez VBService

Lepiej z visibility: hidden; bo z display: none; kontent "pływa"

span:hover::after,
span:hover::before {
  /*display: none;*/
  visibility: hidden;
}

ciekawy efekt jest: transition: opacity;

div {
  text-align: center;
}
span::before,
span::after {
  opacity: 1;
  transition: opacity 1.2s ease-in-out;
}
span::before {
  content: 'before ';
  color: blue;
}
span::after {
  content: ' after';
  color: blue;
}
span:hover::after,
span:hover::before {
  /* display: none; */
  /* visibility: hidden; */
  opacity: 0;
}

CodePen