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

score 0 · Answer 1 · answered Jul 31 '23 at 21:26

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;
}

Do not use `style` in 2023 anymore. The modern approach is the usage of `.classList` and applying changes at the CSS level. — tacoshy, Aug 01 '23 at 06:02
@tacoshy Indeed, while `classList` is considered a better practice, but I prefer avoid saying "Do not use" since both approaches are functional and the choice ultimately depends on the developer's preferences and the specific requirements of the project. — Husain Mohamedi, Aug 01 '23 at 09:32
That is only semi-true. Many functions are from years ago and are outdated. They are only still supported for compatibility issues of browsers that are already deprecated and for projects from 15 or more years ago that they still want to support. That does not mean you still should use outdated methods as it is open for deprecation and newer methods exist for a reason. In this case, you cause specificity weight issues and make maintenance harder. You make visual changes for 13 years through CSS so you have to apply changes for maintenance only in one location instead of all files. — tacoshy, Aug 01 '23 at 09:36
`style` property remains valuable in various scenarios. For instance, it allows for setting dynamic values from complex calculations, which are not achievable using CSS alone. — Husain Mohamedi, Aug 01 '23 at 09:51
it it works within the style attribute then it also works with CSS. You can even add or manipulate CSS with JS. The main valid reason to sue inline style (and one of the major reasons it still exist) is the usage of email templates, which do not apply here. — tacoshy, Aug 01 '23 at 09:52
here's an example of what I meant: `d2.style.width = \`${d1.offsetWidth * 2}px\`;` — Husain Mohamedi, Aug 01 '23 at 10:03

score 0 · Accepted Answer · answered Aug 01 '23 at 07:43

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>

Note, that `has()` still has limited support and it is still questionable if it will get full support. — tacoshy, Aug 01 '23 at 09:37
Indeed, [Can I use `:has()`](https://caniuse.com/css-has) is showing 87% support. Of most concern is Firefox users, shown as less than 3% — Tim R, Aug 01 '23 at 09:42

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

2 Answers2