I want to create a fluffy background image only in the background of the link that I clicked to activate.
I tried the label to see if I could do it only with css, and I tried to change classes with jquery, but it didn't work.
The code is as follows
<!DOCTYPE html>
<html lang="ja">
<head>
<metacharset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> 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">Related Articles</a></li>
<li><a href="#two">Your Messages</a><li>
</ul>
</nav>
<section id="one">
<p> This is one</p>
</section>
<section id="two">
<p> This is two</p>
</section>
<script>
varlinkList=$('#navli');
// What to do when you click a list
linkList.on('click', function(){
// Reset the class setting on the link
linkList.removeClass('huwahuwa');
// Add current class to the list you clicked
$(this).addClass('huwahuwa');
});
</script>
</body>
</html>
@ charset "utf-8";
US>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 —00 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.2 rem;
padding:0;
margin-left —15px;
color:#000;
text-decoration: none;
}
.huwahuwa{
animation —huwahuwa3s infinitease-in-out.8s alternate;
background —url(icon.png) no-repeat center center /60px auto;
display:inline-block;
transition —1.5ase-in-out;
width: 100px;
height —100px;
margin-left: -100px;
z-index:-99;
}
@keyframeshuwahuwa{
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.5ase-in-out;
width: 100px;
height —100px;
margin-left: -100px;
z-index:-99;
}
@keyframeshuwahuwa2{
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;
}
"What does ""fluffy background image"" look like?"
I didn't really understand because the finished image was ambiguous.
"However, I think the reason why jQuery doesn't work is because it says ""nav_""."
Nav should work properly.
var linkList=$('#navli');
// What to do when you click a list
linkList.on('click', function(){
// Reset the class setting on the link
$("section").removeClass('huwahuwa');
$(this).addClass('huwahuwa');
});
@charset "utf-8";
US>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 —00 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.2 rem;
padding:0;
margin-left —15px;
color:#000;
text-decoration: none;
}
.huwahuwa{
animation —huwahuwa3s infinitease-in-out.8s alternate;
background —url(icon.png) no-repeat center center /60px auto;
display:inline-block;
transition —1.5ase-in-out;
width: 100px;
height —100px;
margin-left: -100px;
z-index:-99;
}
@keyframeshuwahuwa{
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.5ase-in-out;
width: 100px;
height —100px;
margin-left: -100px;
z-index:-99;
}
@keyframeshuwahuwa2{
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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<ul class="flex_"id="nav">
<li><a href="#">top</a></li>
<li><a href="#one">Related Articles</a></li>
<li><a href="#two">Your Messages</a><li>
</ul>
</nav>
<section id="one">
<p> This is one</p>
</section>
<section id="two">
<p> This is two</p>
</section>
© 2024 OneMinuteCode. All rights reserved.