Question

我正在制作一个下拉列表但更多的按钮，我需要能够看起来很好。我几乎得到了我需要的所有东西但是当我将鼠标移动到出现的盒子（下拉列表）上时，它会消失。这是我到目前为止所拥有的;

HTML

<div id="buttons">
  <div id="box"></div>
  <div id="content">content here</div>
  <div id="box1"></div>
  <div id="content1">content here</div>
  <div id="box2"></div>
  <div id="content2">content here</div>
</div>

CSS

#box {
  position: absolute;
  width: 10vw;
  height: 10vw;
  background-color: blue;
}

#content {
  position: absolute;
  left: 11vw;
  width: 10vw;
  height: 10vw;
  background-color: red;
  display: none;
}

jquery的

$("#box").hover(
  function() {
    $("#content").slideDown(); //.show();
  },
  function() {
    $("#content").fadeOut(); //hide();
  }
);

$("#content").hover(
  function() {
    $("#content").show(); //.show();
  },
  function() {
    $("#content").fadeOut(); //hide();
  }
);

我做错了什么，更好的方法或者已经回答这个问题的现有问题的链接将非常感激。谢谢！

Answer 1

您也可以通过使用CSS动画内容的height来实现此目的而无需任何Javascript / JQuery。

#box {
  position: absolute;
  width: 10vw;
  height: 10vw;
  background-color: blue;
}

#box:hover + #content, #content:hover {
  height: 10vw;
}

#content {
  position: absolute;
  left: 11vw;
  width: 10vw;
  height: 0;
  background-color: red;
   -webkit-transition: height 0.5s;
  transition: height 0.5s;
  overflow: hidden;
}

<div id="buttons">
  <div id="box"></div>
  <div id="content">content</div>
  <div id="box1"></div>
  <div id="content1">content</div>
  <div id="box2"></div>
  <div id="content2">content</div>
</div>

Answer 2

这正是你想要的。

$("#box, #content").on("mouseenter", function() {
  $("#content").slideDown(); //.show();
})
.on("mouseleave", function() {
  if (!$("#content").is(":hover"))
    $("#content").fadeOut(); //hide();
});

https://jsfiddle.net/kvbvLy4d/

悬停后可见框，然后将鼠标移动到另一个框后保持可见

2 个答案: