有父母和孩子div.希望我的工具提示从Child Div下降.当我悬停父母div时，它会下降

Question

图像是父级，孩子div位于小上 图像的一部分(父(。孩子是我想悬停的Div 并将工具提示下降，但是当我悬停时，工具提示会下降 图像(父(。我真的不使用HTML和CSS，所以请原谅 任何纽布故障。我在工具提示上找到了大多数代码 各种网站。我很远在我的头上！

我从网络下载了片段。试图放置 在一起，但没有足够的经验。

/* 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>