My first object is an object of class "dog-letter". It has two objects of class "dog" and "letter". I managed to make it disappear on hover. My second object is a black circle with a "dog nose" class. But I can't click on this object after it appears.
renew
After using z-index:1, the first object gives consistency, but I still can't click on the second object every time.
If I move the cursor a little bit, I can't click.
.dog-letter-box {
border-top: 1px solid #555;
border-bottom: 2px solid #000000;
height: 250px;
width: 100%;
background: #FEEEEB;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.dog-letter {
z-index:1;
margin: 6% auto;
width: 50px;
height: 150px;
background: #00EFFE;
animation-duration: 0.75s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transform-origin: 50% 40%;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
}
.dog {
width: 50px;
height: 50px;
clip-path: circle(40%);
background: #FFB6C1;
}
.letter {
width: 50px;
height: 100px;
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
background: #FF46C1;
}
.dog-letter:hover + .dog-nose {
animation-duration: 0.75s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-name: show-up;
animation-timing-function: ease;
}
.dog-nose {
margin:10px auto;
width: 70px;
height: 70px;
background: #AFE1AF;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
opacity: 0;
}
.bounce:hover {
animation-name: bounce-up;
animation-timing-function: ease;
}
@keyframes bounce-up {
0% { transform: translateY(0) scaleY(1) rotateY(0); opacity: 1; }
100% { transform: translateY(-15px) scaleY(0.2) rotateY(540deg); opacity: 0; }
}
@keyframes show-up {
0% {opacity: 0;}
100% {opacity: 1;}
}
<div class="dog-letter-box">
<div class="dog-letter bounce">
<div class="dog">55</div>
<div class="letter">66</div>
</div>
<a class="dog-nose" href='http://www.google.com'>
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10"/>
</svg>
</a>
</div>
P粉4251197392024-04-02 11:42:40
Your code relies on hovering .dog-letter , which is not good, you can run animations on hovering the box containing them (.dog-letter, .dog-nose). I'm using .dog-letter-box, you can add a new div and put .dog-letter, .dog-nose inside it.
Additionally, I'm using pointer-events:none for the dog letter after hovering, where the dog nose can be hovered and the link clicked.
.dog-letter-box {
border-top: 1px solid #555;
border-bottom: 2px solid #000000;
height: 250px;
width: 100%;
background: #FEEEEB;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.dog-letter {
z-index:1;
margin: 6% auto;
width: 50px;
height: 150px;
background: #00EFFE;
animation-duration: 0.75s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transform-origin: 50% 40%;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
}
.dog {
width: 50px;
height: 50px;
clip-path: circle(40%);
background: #FFB6C1;
}
.letter {
width: 50px;
height: 100px;
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
background: #FF46C1;
}
.dog-letter-box:hover .dog-nose {
animation-duration: 0.75s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-name: show-up;
animation-timing-function: ease;
}
.dog-nose {
margin:10px auto;
width: 70px;
height: 70px;
background: #AFE1AF;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
opacity: 0;
}
.dog-letter-box:hover .bounce {
animation-name: bounce-up;
animation-timing-function: ease;
pointer-events: none;
}
@keyframes bounce-up {
0% { transform: translateY(0) scaleY(1) rotateY(0); opacity: 1; }
100% { transform: translateY(-15px) scaleY(0.2) rotateY(540deg); opacity: 0; }
}
@keyframes show-up {
0% {opacity: 0;}
100% {opacity: 1;}
}