javascript - 将鼠标悬停在两个 DIV 上

Question

我有一个 div(标题)和另一个当您将鼠标悬停在标题上时出现的 div(按钮)。当您离开标题时，该按钮应该会消失。

在我当前的代码中，当您将光标移到按钮上时，该按钮会消失。当您将鼠标悬停在标题或按钮上时，您是否有任何想法如何保持按钮显示，以便按钮可点击？

谢谢。

fiddle :http://jsfiddle.net/L6jtotog/

CSS:

.headline {
    background-color: grey;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    padding: 5px;
    width: 70%;
    position: relative;
}

#button{
    display: none;
    position: absolute;
    top: 5px;
    right: 100%;
    margin-right: 10px;
}

HTML:

<div>
    <div class="headline" onmouseover="func(true)" onmouseout="func(false)">Headline 1 <div id="button">Test</div></div>

JS:

function func(showPanel) {
    if(showPanel) {
        $("#button").show();
    }
    else {
        $("#button").hide();
    }
}

Answer 1

您可以单独使用 CSS 而不是使用类似的东西!

.headline {
  background-color: grey;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  padding: 5px;
  width: 70%;
  position: relative;
}

#button{
  display: none;
  position: absolute;
  top: 5px;
  left: -50px;
  margin-right: 10px;
  padding-right: 50px;
}

.headline:hover #button {
  display: block;
}

<div>
  <div class="headline">
    Headline 1
    <div id="button">Test</div>
  </div>
</div>

在您的情况下，当您需要转到测试 时，它会调用取消悬停的mouseout。所以我给了一个额外的填充。现在您可以浏览文本。