我有这个html代码：
<div class="content">
<h2><a href="#">Hero</a></h2>
<h2>Hero</h2>
<div class ="tricky"></div>
</div>
其中内容是弹性容器;Tricky 是另一个带有伪元素的 Flex 容器，我想在悬停时用于效果。(意思是我.tricky::before{...}和.tricky::after{..}).tricky, .tricky::before, .tricky::after它们都是方形宽度visibility: hidden。
我希望当悬停时影响所有棘手的可见度或任何其他更改(例如：颜色/宽度/高度的任何内容)或一次一个(例如：.content a:hover ~.tricky:before{...})
我试过了：
content a:hover ~(or + ).tricky:before { ...};content a :hover ~(or +)*{...}，没有任何方法有效。
有什么帮助吗？ 谢谢。
所以我有这个： 我希望当悬停时影响棘手的伪元素，如棘手：：之前{...}，以便能够更改他的可见性，宽度，高度以及相同的：：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>你的问题不是很清楚。你在找这个吗？每当悬停任何以前的同级h2时，都会显示::after内容。
h2:hover~.tricky::after {
content: "123";
}<div class="content">
<h2><a href="#">Hero</a></h2>
<h2>Hero</h2>
<div class="tricky"></div>
</div>我使用onmouseover和onmouseleave事件侦听器来跟踪悬停和出出事件，并添加/删除了visibleAfter类，该类将负责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>你想要这个吗？ .tricky：：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>