懸停其兄弟時如何訪問偽元素

Question

我有這個 html 代碼：

<div class="content">
   <h2><a href="#">Hero</a></h2>
   <h2>Hero</h2>
    <div class ="tricky"></div>
 </div>

其中 content 是一個 flex 容器；tricky 是另一個具有偽元素的 flex 容器，之前和之后我想在 a 懸停時用於效果。（意思是我得到了.tricky::before{...}和.tricky::after{..} ) .tricky, .tricky::before, .tricky::after所有這些都是方形寬度visibility: hidden 。

我希望當 a 懸停時影響所有棘手的可見性可見或任何其他更改（例如：顏色/寬度/高度任何內容）或一次一個（例如： .content a:hover ~.tricky:before{...} )

我試過：

content a:hover ~(or + ).tricky:before { ...} ; content a :hover ~(or +)*{...}並且沒有任何方法有效。

有什么幫助嗎？ 謝謝你。

所以我有這個：我希望當 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>

Answer 1

你想要這個嗎？ .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>

Answer 2

我使用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>

Answer 3

你的問題不是很清楚。 你在找這個嗎？ ::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>

懸停其兄弟時如何訪問偽元素

問題描述

3 個解決方案

解決方案1
0 2021-11-07 13:01:50

解決方案2
0 2021-11-07 13:19:29

解決方案3
0 2021-11-08 11:58:41

懸停其兄弟時如何訪問偽元素

問題描述

3 個解決方案

解決方案1 0 2021-11-07 13:01:50

解決方案2 0 2021-11-07 13:19:29

解決方案3 0 2021-11-08 11:58:41

解決方案1
0 2021-11-07 13:01:50

解決方案2
0 2021-11-07 13:19:29

解決方案3
0 2021-11-08 11:58:41