css 有没有一种方法可以将鼠标悬停在一个文本上并显示其他文本？在另一个div中

tez616oj 于 11个月前发布在其他

关注(0)|答案(2)|浏览(70)

所以我看到这些帖子1和这一个悬停在div上改变另一个div 2
你把鼠标悬停在某个图像上，它会显示文本
我试着用文字来做，效果很好。现在我试着把它放在div里，结果它停止工作了
我想要的是当我悬停在右边的html上时，htmldes dic会显示在左边。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;
}

个字符
我已经做了4个多小时了。寻求帮助和搜索，并尝试了所有的方法，我发现可以工作，但没有一个是有效的。请帮帮忙

css

来源：https://stackoverflow.com/questions/76806447/is-there-a-way-to-hover-over-a-text-and-show-some-other-text-which-is-in-anothe

2条答案

按热度按时间

9udxz4iz1#

这可以使用: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>

的数据

赞(0）回复(0）举报 11个月前

3qpi33ja2#

尝试使用JavaScript事件侦听器mouseover和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>

个字符

赞(0）回复(0）举报 11个月前

我来回答

css 有没有一种方法可以将鼠标悬停在一个文本上并显示其他文本？在另一个div中

2条答案

相关问题

热门标签

最新问答