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/

Answer 2

只需在启动时将所有h2隐藏到元素，并在悬停时显示即可。你需要一个悬停事件的触发器，你提到它是"那个区域"。

有几种方法可以实现这一点：

• 将css显示属性设置为none h2 {display:none}

• 将html隐藏属性设置为真正的<h2 hidden></h2>

• 甚至css不透明度为0 h2 {opacity:0}（使用jquery show()不起作用）

• 或者在启动时通过jquery触发它（更像脏解决方案）$('h2').hide()

您正在搜索的jquery方法是show()和hide()，您也可以使用slideToggle()功能播放动画。

看看：https://jsfiddle.net/5caeLcn0/1/