Learning site for website creation

jQueryを使ってonマウス時にブロック要素を重ねる

  • 投稿日:2017年04月23日
  • 更新日:2019年04月23日

onマウス時に対象要素の上に別のブロックレベル要素を重ねて表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
<style>
li {
  position: relative;
}
.over {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 200px;
  height: 200px;
  background-color: red;
  display: none;
}
.base {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 200px;
  height: 200px;
  background-color: blue;
}
</style>
</head>
<body>
<ul>
  <li>
    <a href="">
      <div class="base"></div>
      <div class="over"></div>
    </a>
  </li>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
  $('.base').on('mouseover',function(){
    $('.over').fadeIn(500);
  });
  $('.over').on('mouseout',function(){
    $('.over').fadeOut(500);
  });
});
</script>
</body>
</html>