徘徊在两个DIV上

Question

我有一个div(标题)和另一个div(按钮),当你将鼠标悬停在标题上时.当您离开标题时,按钮应该消失.

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

谢谢.

小提琴: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>

在你的情况下,当你需要去的时候Test,它会调用mouseout取消悬停的东西.所以我给了一个额外的填充.现在你可以查看文本了.