jQueryを使ってonマウス時にブロック要素を重ねる
公開日:2017年04月23日
更新日:2022年01月13日
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>
同じタグのコンテンツ
同じカテゴリーのコンテンツ
