Javascript/Jquery 在 mouseout 上隐藏所有 h2

Question

当鼠标不在该区域上时，如何隐藏页面中的所有 h2 内容，并且仅在 javascript 或 CSS 中的鼠标悬停/悬停时显示

Answer 1

$(".redsquarecss")
  .hover(function() {
      $(".headers").show();
    },
    function() {
      $(".headers").hide()
    }
  );

div.redsquarecss {
  height: 150px;
  width: 150px;
  background-color: #FF0000;
}
div.headers {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="redsquarecss" title="Square 1"></div>
<div class="headers">
  <h2>This is heading 2</h2>
  <h2>This is heading 2</h2>
  <h2>This is heading 2</h2>
</div>

https://jsfiddle.net/0r59so8r/1/