CSS 使用方法 #

  1. 用 opacity:0 和 visibility: hidden;

  2. 配合 hover

  3. 原先 opacity（透明度为 0）hover 设置为 1，即从隐藏到显示，visibility 同理

注意的是，这边用 display：none 到 block 等不行，因为 display 是连渲染都不渲染，浏览器直接忽略显示连理都不理，但是 opacity/visibility 是会预留空间的，这一块还是占位置的，伪元素还是有效的

JS 使用方法 #

用 JavaScript 隐藏控件的方法有两种，分别是通过设置控件的 style 的 "display" 和 "visibility" 属性。

当 style.display="block" 或 style.visibility="visible" 时控件可见，当 style.display="none" 或 style.visibility="hidden" 时控件不可见。不同的是 "display" 不但隐藏控件，而且被隐藏的控件不再占用显示时占用的位置，而 "visibility" 隐藏的控件仅仅是将控件设置成不可见了，控件仍然占据原来的位置。（理由同上面，浏览器不渲染 display）

function displayHideUI() {
  var ui = document.getElementById("bbs");
  ui.style.display = "none";
}

function displayShowUI() {
  var ui = document.getElementById("bbs");
  ui.style.display = ""; // display为空的话会好使，为block会使后边的空间换行
}

function visibilityHideUI() {
  var ui = document.getElementById("bbs");
  ui.style.visibility = "hidden";
}

function visibilityShowUI() {
  var ui = document.getElementById("bbs");
  ui.style.visibility = "visible";
}

然后配合鼠标事件。

jQuery 使用方法 #

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

$("#hide").click(function () {
  $("p").hide();
});

$("#show").click(function () {
  $("p").show();
});

具体看：学习从无止境

the end

如果你还有什么方法，可以在底下告诉染念哦！