按钮控制div隐藏显示出来

按钮控制div隐藏显示出来的实现方法可以通过JavaScript来实现。我们需要给按钮添加一个点击事件，当按钮被点击时，我们可以通过改变div的样式来实现隐藏或显示。

示例代码如下：

HTML部分：

<button id="toggleButton">点击按钮</button>
<div id="content" style="display: none;">这是要隐藏或显示的内容</div>

JavaScript部分：

var toggleButton = document.getElementById("toggleButton");
var content = document.getElementById("content");
toggleButton.addEventListener("click", function() {
  if (content.style.display === "none") {
    content.style.display = "block";
  } else {
    content.style.display = "none";
  }
});

在上面的示例代码中，我们首先通过`getElementById`方法获取了按钮和div元素的引用。然后，我们使用`addEventListener`方法为按钮添加了一个点击事件监听器。

在点击事件的回调函数中，我们使用了一个条件语句来判断div的当前显示状态。如果div的`display`属性值为"none"，则将其改为"block"，即显示出来；如果div的`display`属性值不为"none"，则将其改为"none"，即隐藏起来。

这样，当按钮被点击时，div就会根据当前的显示状态进行隐藏或显示。

需要注意的是，上述示例代码中使用了内联样式（`style="display: none;"`）来初始隐藏div。如果希望初始状态为显示，可以将该样式改为`style="display: block;"`。

除了通过JavaScript来实现按钮控制div的隐藏和显示，还可以使用CSS的`:hover`伪类来实现鼠标悬停时显示div的效果。示例代码如下：

HTML部分：

<button id="toggleButton">点击按钮</button>
<div id="content">这是要隐藏或显示的内容</div>

CSS部分：

#content {
  display: none;
}
#toggleButton:hover + #content {
  display: block;
}

在上述示例代码中，我们首先给div添加了一个初始的样式`display: none;`，使其初始状态为隐藏。

然后，我们使用CSS的相邻兄弟选择器（`+`）和`:hover`伪类来实现鼠标悬停时显示div的效果。当鼠标悬停在按钮上时，通过选择器`#toggleButton:hover + #content`来选中div元素，并将其样式的`display`属性值改为"block"，即显示出来。

这种方法相比于使用JavaScript，实现起来更加简洁，但是只能实现鼠标悬停时显示div，无法通过点击按钮来控制隐藏和显示。