I have this html code :
<div class="content">
<h2><a href="#">Hero</a></h2>
<h2>Hero</h2>
<div class ="tricky"></div>
</div>
where content is a flex container;tricky is another flex container with pseudo elements before and after that i want to use for effects when a is hover.(meaning i got .tricky::before{...}
and .tricky::after{..}
) .tricky, .tricky::before, .tricky::after
all of them are square width visibility: hidden
.
I want when a is hover to affect all tricky's visibility to visible or any other change(ex: color/width/height anything) or one at a time(ex: .content a:hover ~.tricky:before{...}
)
I tried :
content a:hover ~(or + ).tricky:before { ...}
; content a :hover ~(or +)*{...}
and no method works.
Any help? Thank you.
So i have this: I want when a is hover to affect tricky's pseudo elements like tricky::before{...} to be able to change his visibility,width,height and same for ::after.
*{ padding:0; margin:0; } .content{ position:relative; top:200px; left:300px; display:flex; justify-content:center; align-items:center; flex-direction:column; width:150px; height:150px; background:transparent; overflow:hidden; border-radius:20px; } .content::before{ content:""; position:absolute; width:100px; height:250px; background:linear-gradient(cyan,purple); animation:4s borderef linear infinite; } .content::after{ content:""; position:absolute; background:linear-gradient(red,white); inset:3px; } /* hero a(linkul) sta in fata, iar h2 sta in spate*/ .content a{ position:absolute; color:red; transform:translate(-50%,0); -webkit-text-stroke: 1px yellow; font-size:2.5rem; text-decoration:none; z-index:3; } .content h2:nth-child(2){ color:blue; font-size:2.5rem; animation:animate 4s ease-in-out infinite; z-index:3; } .tricky{ position:absolute; display:flex; width:100px; height:100px; background:red; overflow:hidden; border-radius:20px; align-items:center; justify-content:center; } .tricky::before{ content:""; position:absolute; width:30px; height:130px; background:radial-gradient(yellow,cyan); animation:4s borderef2 linear infinite; border-radius:20px; z-index:2; visibility:hidden; } .tricky::after{ content:""; position:absolute; background:linear-gradient(yellow,white); inset:5px; z-index:2; visibility:hidden; } #ida:hover ~ .tricky::after{ content:""; background:black; visibility:visible; } @keyframes animate { 0% ,100% { clip-path: polygon(0% 45% ,15% 44% ,32% 50%, 54% 60% ,70% 61% ,84% 59%, 100% 52%, 100% 100% ,0% 100%) ; } 50% { clip-path: polygon(0% 60% ,16% 65% ,34% 66% ,51% 62% ,67% 50%, 84% 45% ,100% 46%, 100% 100%, 0% 100%) ; } } @keyframes borderef{ 0% { transform:rotate(0deg) ; } 100%{ transform:rotate(360deg) ; } } @keyframes borderef2{ 0% { transform:rotate(0deg) ; } 100%{ transform:rotate(-360deg) ; } }
<!DOCTYPE html> <html lang="en" dir="ltr"> <link href="test.css" rel="stylesheet"/> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="content"> <h2><a id ="ida" href="#">Hero</a></h2> <h2>Hero</h2> <div class ="tricky"> </div> </div> </body> </html>
Do you want this? .tricky::after will show on h2's Hover
//CSS
<style>
h2:hover + .tricky::after{
content: "123";
}
</style>
//HTML
<div class="content">
<h2><a href="#">Hero</a></h2>
<h2>Hero</h2>
<div class ="tricky"></div>
</div>
I have used onmouseover
and onmouseleave
event listener to track the hover and out event and added/removed the visibleAfter
class which will take care of the styling of content::after
in the CSS
const link = document.getElementById('link'); const tricky = document.getElementById('tricky'); link.addEventListener('mouseover', ()=>{ tricky.classList.add('visibleAfter') }) link.addEventListener('mouseleave', ()=>{ tricky.classList.remove('visibleAfter') })
.tricky, .tricky::before, .tricky::after { width: 50px; aspect-ratio: 1; background: #777; position:relative; } .tricky::before, .tricky::after{ content: ''; display:block; position:absolute; display:block; visibility:hidden; } .tricky::before{ top:.5em; left:.5em; background:red; } .tricky::after{ top: 1em; left:1em; background:green; } .visibleAfter::after { visibility: unset; }
<div class="content"> <h2><a id='link' href="#">Hero</a></h2> <h2>Hero</h2> <div id='tricky' class="tricky"></div> </div>
Your question is not very clear. Are you looking for this? The ::after
content will show whenever any previous sibling h2
is hovered.
h2:hover~.tricky::after { content: "123"; }
<div class="content"> <h2><a href="#">Hero</a></h2> <h2>Hero</h2> <div class="tricky"></div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.