悬停其兄弟时如何访问伪元素
[英]How to acces pseudo element(s) when its sibling is hovered
问题描述
I have this html code :
我有这个 html 代码：
<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 .其中 content 是一个 flex 容器；tricky 是另一个具有伪元素的 flex 容器，之前和之后我想在 a 悬停时用于效果。（意思是我得到了.tricky::before{...}和.tricky::after{..} ) .tricky, .tricky::before, .tricky::after所有这些都是方形宽度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{...} )我希望当 a 悬停时影响所有棘手的可见性可见或任何其他更改（例如：颜色/宽度/高度任何内容）或一次一个（例如： .content a:hover ~.tricky:before{...} )
I tried :我试过 ：
content a:hover ~(or + ).tricky:before { ...} ; content a:hover ~(or + ).tricky:before { ...} ; content a :hover ~(or +)*{...} and no method works. content a :hover ~(or +)*{...}并且没有任何方法有效。
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.所以我有这个：我希望当 a 悬停时影响棘手的伪元素，如：tricky::before{...} 能够改变他的可见性，宽度，高度和 ::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>
3 个解决方案
解决方案1
0 2021-11-07 13:01:50
Do you want this?你想要这个吗？ .tricky::after will show on h2's Hover .tricky::after 将显示在 h2 的 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>
解决方案2
0 2021-11-07 13:19:29
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我使用onmouseover和onmouseleave事件侦听器来跟踪悬停和退出事件，并添加/删除了visibleAfter类，该类将处理CSS中content::after的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>
解决方案3
0 2021-11-08 11:58:41
Your question is not very clear.你的问题不是很清楚。 Are you looking for this?你在找这个吗？ The ::after content will show whenever any previous sibling h2 is hovered. ::after内容将在任何先前的兄弟h2悬停时显示。
h2:hover~.tricky::after { content: "123"; }
<div class="content"> <h2><a href="#">Hero</a></h2> <h2>Hero</h2> <div class="tricky"></div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.