VS Code ve Css

xconcise

Vs Code ile css çalışan birisi var mı ? Text hover yaptım ama her kelimede ayrı çalışmasını istiyorum nasıl yapabilirim yardımcı olurmusunuz?
text den kastım paragraf biçiminde

svt

Her kelimeyi ayrı <p> veya <span> içine alabilirsin.

Örnek:

<html>
  <head>
    <meta charset="UTF-8">
    <style>
      .hover-kirmizi:hover {
        color: red;
      }

      .hover-mavi:hover {
        color: blue;
      }

      .hover-yesil:hover {
        color: green;
      }
    </style>
  </head>
  <body>
    <div>
      <span class="hover-yesil">Her</span>
      <span class="hover-kirmizi">kelimenin</span>
      <span class="hover-mavi">üzerinde</span>
      <span class="hover-yesil">farklı</span>
      <span class="hover-kirmizi">renkli</span>
      <span class="hover-mavi">hover</span>
      <span class="hover-yesil">uygulanmıştır.</span>
    </div>
  </body>
</html>

KerimCETINBAS

yanlis anlamadiysam paragraf icindeki her kelime icin ayri ayri hover olsun istiyorsunuz. Bunun icin bir tik js yede ihtiyaciniz var


<p id="text"></P>
<script>
const text ='Lorem ipsum dolor, sit amet consectetur adipisicing elit.  Voluptatibus deserunt similique'
const paragraph = document.querySelector("#text")
paragraph.innerHTML = text.split(/\r/g).map(t =>`<span> ${t} </span>`).join(" ")
</script>

<style>
   #text span:hover { color: fuchsia; }
</style>

codepen örneği;
https://codepen.io/KerimCETINBAS/pen/wvYGVqO?editors=1111