クリックしてアクティブにしたリンクの背景にだけ、ふわふわと動く背景画像を出現させたいです。
cssだけでできないかと調べてlabelを試して失敗し、jqueryでクラスを付け替えることを試しましたがうまくいきません。
コードは以下
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>タイトル</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<nav>
<ul class="flex_" id="nav_">
<li><a href="#">top</a></li>
<li><a href="#one">関連記事</a></li>
<li><a href="#two">みなさんのメッセージ</a></li>
</ul>
</nav>
<section id="one">
<p>ここはoneだよ</p>
</section>
<section id="two">
<p>ここはtwoだよ</p>
</section>
<script>
var linkList = $('#nav li');
//リストをクリックした時の処理
linkList.on('click', function () {
//リンクのclass設定をリセット
linkList.removeClass('huwahuwa');
//クリックしたリストにcurrentのclassを追加
$(this).addClass('huwahuwa');
});
</script>
</body>
</html>
@charset "utf-8";
html{
scroll-behavior: smooth;
}
body{
width:960px;
margin:0 auto;
font-size: 16px;
position: relative ;
}
a {
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}
nav{
height:90px;
width:95%;
margin:0 auto;
position: fixed;
top:0;
left:0;
}
.flex_{
max-width: 1200px;
width:40%;
margin:0 0 0 60%;
height:80px;
line-height:80px;
display: flex;
justify-content: space-between;
text-decoration: none;
list-style: none;
}
@media(max-width: 959px){
body{
width:100%;
}
.flex_{
width:95%;
margin:0 auto;
}
}
.flex_ a{
display: block;
font-size:1.2rem;
padding:0;
margin-left:15px;
color:#000;
text-decoration: none;
}
.huwahuwa{
animation:huwahuwa 3s infinite ease-in-out .8s alternate;
background:url(icon.png) no-repeat center center / 60px auto;
display:inline-block;
transition:1.5s ease-in-out;
width:100px;
height:100px;
margin-left:-100px;
z-index:-99;
}
@keyframes huwahuwa {
0%{
transform:translate(0,0) rotate(-7deg);
}
50%{
transform:translate(0,-7px) rotate(0deg);
}
100%{
transform:translate(0,0) rotate(7deg);
}
}
.huwahuwa2{
animation:huwahuwa 2.7s infinite ease-in-out .65s alternate;
background:url(icon.png) no-repeat center center / 60px auto;
display:inline-block;
transition:1.5s ease-in-out;
width:100px;
height:100px;
margin-left:-100px;
z-index:-99;
}
@keyframes huwahuwa2 {
0%{
transform:translate(0,0) rotate(-7deg);
}
50%{
transform:translate(0,-7px) rotate(0deg);
}
100%{
transform:translate(0,0) rotate(7deg);
}
}
.flex_ a:hover{
opacity:0.6;
transition: .6s;
}
#one,#two,#three{
width:100%;
height:600px;
}
#one{
margin-top:80px;
background:pink;
z-index:-100;
}
#two{
background:skyblue;
z-index:-100;
}
#three{
background:green;
z-index:-100;
}