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

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

Solution

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>