Question

当您将鼠标悬停在标题上时，我会显示div（标题）和另一个div（按钮）。当你离开标题时，按钮应该消失。

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

感谢。

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>

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

Answer 2

将#button的排名属性设为绝对时，position:absolute; 它使浏览器认为#button不在div .headline之内这就是为什么当鼠标光标到达#button时，浏览器实际上认为它在.headline之外，因此调用onmouseout函数。这就是你遇到这个问题的原因。

您可能希望从position:absolute移除#button并使用position:relative。

悬停在两个DIV上

2 个答案: