有父子div。希望我的工具提示从子 div 中删除。当我悬停父 div 时它会下降

Question

图像是父 div，子 div 位于一个小的 图像的一部分（父）。孩子是我要悬停的div 并让工具提示下拉，但是当我悬停时工具提示会下拉 图像（父）。我不会真正使用 HTML 和 css，所以请原谅 任何新手的错误。我找到了工具提示的大部分代码 各种网站。我实在是太过分了！！！

我从网上下载了 sn-ps。试图把 在一起，只是经验不够。

/* I do not understand the css, but after several
       weeks of research this is what I have. The Image
       seems to be placed correctly and is the right size.
    */

body {
  text-align: center;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: none;
}


/* The tooltip is in fact hidden.*/

.tooltip .tooltiptext {
  visibility: hidden;
  width: 290px;
  background-color: #ffcc99;
  color: #000;
  text-align: left;
  border-radius: 6px;
  padding: 5px 0;
  margin-left: 10px;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 110%;
}


/* Tooltip becomes visible when hover
         over the big Image. */

.tooltip:hover .tooltiptext {
  visibility: visible;
}


/* I added this to the sample I downloaded. It
         sizes the Image correctly, and locates it
         where I want it on the Webpage.
    */

#container {
  position: absolute;
  width: 330px;
  height: 240px;
  border: 5px, #000;
  border-style: solid;
  margin: auto;
  margin-top: 10px;
  left: 40px;
  top: 20px;
}

#container img {
  width: 100%;
  height: 100%;
}


/* This creates the child div. I have located it
         over the area on the Image where I want the
         tooltip to become visible. I put a border 
         around the child so I can see where it is.
    */

.dropdown {
  position: absolute;
  width: 226px;
  height: 23px;
  border: 1px, #000000;
  border-style: solid;
  background: transparent;
  left: 45px;
  top: 15px;
}

/* The below code is where I am really not sure how to use. The tooltip drops down when I hover the Image. I cannot make it so that it only drops when I hover the child. I will send a screenshot if I can figure out how to do so. */
<h2>The Best Tooltip</h2>
<p>Move the mouse over the Image below:</p>
<div class="tooltip"> <img src="MMDVM_Pic.jpg" alt="#">
  <div class="dropdown">
    <span class="tooltiptext"><b><center>More Information About Date and 
        Time</center></b>
      <p style="margin-left:10px; margin-right:10px">This shows the <font 
        color=”#050778A”;><b>Date and Time </b></font>as reported by <font 
        color=”#ff0000”;><b>pistar.</b></font> There are several <font 
        color=”#E0E614”;>formats</font> supported.</p>
    </div>
    </div>

Answer 1

首先，最好删除内联样式并将其添加到您的 CSS 中。然后我会建议使用相对单位而不是像素单位（20% vs 100px），以便您的网站能够响应。

要回答你的问题，这是罪魁祸首：

.tooltip:hover .tooltiptext {
  visibility: visible;
}

现在，当您将鼠标悬停在 .tooltip（即父级）上时，它就会激活。您希望在将鼠标悬停在 .tooltiptext 上时激活它。这样代码就变成了：

.tooltip .tooltiptext:hover {
  visibility: visible;
}

Answer 2

您应该考虑开始养成使用正确标识组织代码的习惯，这样您就不会迷失在自己的代码中。

看看是不是你想要的：

document.getElementById("sibling").addEventListener("mouseover", function(){
  document.getElementById("child").style.visibility = "visible";
});
document.getElementById("sibling").addEventListener("mouseout", function(){
  document.getElementById("child").style.visibility = "hidden";
});

* {
  margin: 0;
  padding: 0;
  text-align: center;
}

.parent {
  position: relative;
  display: inline-block;
  width: 400px;
  height: 250px;
  padding-top: 30px;
  background-color: silver;
}

.sibling {
  background-color: grey;
  width: 50%;
  height: 100px;
  margin: 0 auto;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
}

.child {
  visibility: hidden;
  width: 50%;
  height: 100px;
  background-color: yellow;
  margin: 0 auto;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
}

<div class="parent">
  I'm the parent DIV !
  <div class="sibling" id="sibling">I'm the sibling DIV, hover me !</div>
  <div class="child" id="child">Here it goes an example !</div>
</div>