Css napis neon

pytanie zadane 22 czerwca 2021 w HTML i CSS przez Kalindoreks Użytkownik (620 p.)

Witam proszę was o pomoc. Miałem pomysł aby stworzyć sobie taki właśnie neonowy napis pt "Spectacular", ale natknąłem na pewien problem. Chciałbym aby po najechaniu na części wyrazy "pe" i "cula" pojawiał się na nim text-shadow. Teoretycznie już to zrobiłem, ale chciałem aby po najechaniu na jeden drugi podświetlał się także. Pozdrawiam

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Document</title>
</head>
<body>

    <span class="chosen_f">S</span><span  class="chosen_s">pe</span><span class="chosen_f">cta</span><span class="chosen_s">cula</span><span class="chosen_f">r</span>

</body>
</html>

body
{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #031321;
    font-family: poppins;
    font-weight: 400;
    font-size: 500%;
}
span
{
    color: white;
    transition: 0.5s;
}
.chosen_f
{
    color: white;
}
.chosen_s
{
color: #15f4ee;
}
.chosen_f:hover
{
    text-shadow: 3px 2px 10px #15f4ee;
}
.chosen_s:hover
{
    text-shadow: 3px 2px 10px white;
}

2 odpowiedzi

odpowiedź 22 czerwca 2021 przez ScriptyChris Mędrzec (190,190 p.)

odpowiedź 23 czerwca 2021 przez VBService Ekspert (253,340 p.)

Propozycja z zastosowaniem js-a

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Document</title>
  </head>
  <body>

    <div class="chosen_container">
      <span class="chosen_f">S</span><span class="chosen_s">pe</span><span class="chosen_f">cta</span><span class="chosen_s">cula</span><span class="chosen_f">r</span>      
    </div>

  </body>
</html>

body
{
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #031321;
  font-family: poppins;
  font-weight: 400;
  font-size: 500%;
}
.chosen_container span {
  padding: 0;
  margin: 0;
  transition: 0.5s;
}
.chosen_container {
  --text-shadow-s: none;
  --text-shadow-f: none;
}
.chosen_f
{
  color: white;
  text-shadow: var(--text-shadow-f);
}
.chosen_f_hover
{
  --text-shadow-f: 3px 2px 10px #15f4ee;
}
.chosen_s
{
  color: #15f4ee;
  text-shadow: var(--text-shadow-s);
}
.chosen_s_hover
{
  --text-shadow-s: 3px 2px 10px white;
}

document.addEventListener('DOMContentLoaded', () => {
  const chosen_span = document.querySelectorAll('.chosen_container span');

  chosen_span.forEach((span) => {
    ['mouseover', 'mouseout'].forEach((event) => {
      span.addEventListener(event, ({target}) => {
        const hover_css = target.classList[0];
        [...document.querySelectorAll(`.chosen_container .${hover_css}`)].forEach((item) => {
          item.classList.toggle(`${hover_css}_hover`);
        })
      })
    })    
  })
})