javascript - 将鼠标悬停在另一个对象上时淡入一个对象

Question

我想在将鼠标悬停在另一个元素上时向下滑动工具提示元素。

我尝试使用 jQuery，但我发现如果我将 hover 悬停在 countbox1 上，任何内容都不会淡入。 countbox1 是一个用 javascript 制作的计时器。

我不认为剧本有错。我认为出于某种原因它没有检测到 jQuery。

我还尝试下载 jQuery 并将其直接放在“src:”中。

$(document).ready(function(){
  $("#countbox1").onmouseover(function(){
    $("#tooltip").fadeIn();
  });
  $("#countbox1").onmouseout(function(){
    $("#tooltip").fadeOut();
  });
});

#countbox1 {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-family: bebas;
  font-size: 70px;
  color: white;
  cursor: default;
}

#tooltip {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  color: white;
  font-family: mix_thin;
  font-size: 18px;
  text-align: center;
  margin-bottom: -5px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="home">
  <p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p>
  <div id="countbox1"></div>
  <hr style="width: 500px;">
</div>

Answer 1

如果您想要的只是悬停在其他东西上时进入屏幕的工具提示，我建议使用 CSS transition .

如果嵌套 <p id="tooltip">在 #countbox1 内并放一个 :hover -事件就在那，你可以得到你想要的东西。

HTML

<div id=home>
    <div id="countbox1">
        <p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p>
    </div>
    <hr style="width: 500px;">
</div>

CSS

#home {
    height: 50%;
    background: red;
}

#countbox1 {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: bebas;
    font-size: 70px;
    color: white;
    cursor: default;
    height: 50px;
    background: #f4f4f4;
}

#countbox1:hover #tooltip {
    opacity: 1;

}

#tooltip {
    width: 500px;
    color: white;
    font-family: mix_thin;
    font-size: 18px;
    text-align: center;
    height: 30px;
    background: #0000ff;
    position: absolute;
    left: 50%;
    margin-left: -250px;
    top: -15px;
    opacity: 0;
    transition: all 1s;
}

Here's a working demo .将鼠标悬停在工具提示的灰色区域上以进入 View 。

Here's a working demo工具提示从顶部进入屏幕的位置。