is there a way to hover over a text and show some other text? which is in another div

Question

So i saw these post 1 and this one for hover on div to change another div 2

on which you hover over some image and it shows the text

I tried doing it with text and it works just fine. Now i tried to do it by putting it in div and it stops working

What i want is when i hover over html on right, the htmldes dic shows up on left. what i want what i get

.skill{
    display: flex;
    justify-content: center;
    align-items: center;
}
.skilldes{
    background-color: blue;
    width: 50%;
    height: 300px;
}
/* skilldescriptioncontainer */
.sdc{
    display: flex;
    flex-direction: column;
    width: 50%;
    background-color: rgb(255, 0, 0);
    position: absolute;
}
.skilltxt{
    background-color: rgb(163, 9, 9);
    width: 50%;
    height: auto;
}
.skillsub{
    display: flex;
    justify-content: center;
    align-items: center;
}
.skillsubcon{
    margin: 10px;
}
.htmldes{
    display:none;
    background-color: aqua;
}
.skill .skilltxt .skillsub .html:hover + .skill .skillimg .htmldes{
    display:block;
}

<div class="bg center">  <!-- CENTER is to center text and bg is just background color-->
        <br>
        <h1 class="title chakra">SKILLs</h1>
        <p class="des oswald">All my skills are mentioned below.</p>
        <div class="skill maxwidth">  <!-- max width is just to make widt 100% -->
            <div class="skilldes">
                <div class="sdc htmldes">  <!-- sdc = skilldescriptioncontainer -->
                    <h1 class="subtitle">HTML</h1>
                    <p class="des ml">I started learning HTML in 2020 and I have learned advanced HTML and know almost all the functions.</p>
                    <p class="des ml">You can give me any task and I will complete it for you.</p>
                </div>
            </div>

            <div class="skilltxt">
                <br>
                <h1 class="subtitle">Skills</h1> <!-- subtitle is just font size -->
                <br>
                <div class="skillsub">
                    <div class="skillsubcon bg html">
                        HTML
                    </div>
                </div>
                <br>
            </div>
        </div>
    </div>

I have been doing this for more than 4 hours now. asked for help and search and tried all ways i found which can work but none were effective. please help

Answer 1

This can be accomplished using the :has() pseudo-class

.skill:has(.html:hover) .htmldes {
  display:block;
}

.skill{
    display: flex;
    justify-content: center;
    align-items: center;
}
.skilldes{
    background-color: blue;
    width: 50%;
    height: 300px;
}
/* skilldescriptioncontainer */
.sdc{
    display: flex;
    flex-direction: column;
    width: 50%;
    background-color: rgb(255, 0, 0);
    position: absolute;
}
.skilltxt{
    background-color: rgb(163, 9, 9);
    width: 50%;
    height: auto;
}
.skillsub{
    display: flex;
    justify-content: center;
    align-items: center;
}
.skillsubcon{
    margin: 10px;
}
.htmldes{
    display:none;
    background-color: aqua;
}
.skill:has(.html:hover) .htmldes{
    display:block;
}

<div class="bg center">  <!-- CENTER is to center text and bg is just background color-->
        <br>
        <h1 class="title chakra">SKILLs</h1>
        <p class="des oswald">All my skills are mentioned below.</p>
        <div class="skill maxwidth">  <!-- max width is just to make widt 100% -->
            <div class="skilldes">
                <div class="sdc htmldes">  <!-- sdc = skilldescriptioncontainer -->
                    <h1 class="subtitle">HTML</h1>
                    <p class="des ml">I started learning HTML in 2020 and I have learned advanced HTML and know almost all the functions.</p>
                    <p class="des ml">You can give me any task and I will complete it for you.</p>
                </div>
            </div>

            <div class="skilltxt">
                <br>
                <h1 class="subtitle">Skills</h1> <!-- subtitle is just font size -->
                <br>
                <div class="skillsub">
                    <div class="skillsubcon bg html">
                        HTML
                    </div>
                </div>
                <br>
            </div>
        </div>
    </div>

Answer 2

Try using JavaScript event listeners, mouseover and mouseout:

<div class="bg center">
      <!-- CENTER is to center text and bg is just background color-->
      <br />
      <h1 class="title chakra">SKILLs</h1>
      <p class="des oswald">All my skills are mentioned below.</p>
      <div class="skill maxwidth">
        <!-- max width is just to make widt 100% -->
        <div class="skilldes">
          <div class="sdc htmldes">
            <!-- sdc = skilldescriptioncontainer -->
            <h1 class="subtitle">HTML</h1>
            <p class="des ml">
              I started learning HTML in 2020 and I have learned advanced HTML
              and know almost all the functions.
            </p>
            <p class="des ml">
              You can give me any task and I will complete it for you.
            </p>
          </div>
        </div>

        <div class="skilltxt">
          <br />
          <h1 class="subtitle">Skills</h1>
          <!-- subtitle is just font size -->
          <br />
          <div class="skillsub">
            <div class="skillsubcon bg html">HTML</div>
          </div>
          <br />
        </div>
      </div>
    </div>
    <script>
      const html = document.querySelector(".html");
      const htmldes = document.querySelector(".htmldes");

      html.addEventListener("mouseover", () => {
        htmldes.style.display = "block";
      });

      html.addEventListener("mouseout", () => {
        htmldes.style.display = "none";
      });
    </script>

.skill{
  display: flex;
  justify-content: center;
  align-items: center;
}
.skilldes{
  background-color: blue;
  width: 50%;
  height: 300px;
}
/* skilldescriptioncontainer */
.sdc{
  display: flex;
  flex-direction: column;
  width: 50%;
  background-color: rgb(255, 0, 0);
  position: absolute;
}
.skilltxt{
  background-color: rgb(163, 9, 9);
  width: 50%;
  height: auto;
}
.skillsub{
  display: flex;
  justify-content: center;
  align-items: center;
}
.skillsubcon{
  margin: 10px;
}
.htmldes{
  display:none;
  background-color: aqua;
}