CSS底層和頂層的懸停觸發器

如何爲兩個層進行CSS懸停過渡。我寫了整個頁面，以便您可以（複製/粘貼）從您的計算機桌面上進行嘗試。我有什麼作品，但是可以在沒有JavaScript和純CSS的jQuery的情況下完成？我嘗試了CSS指針事件，並能夠轉換頂層（#circleOuter）或底層（#circleInner），但不能同時轉換兩層。爲此，#circleOuter：hover必須觸發#circleInner。任何幫助表示讚賞。CSS底層和頂層的懸停觸發器

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
     $(document).ready(function(){ 
      $("#circleOuter").hover(function(){ 
       $("#circleInner").css("transform","rotate(180deg)"); 
       $("#circleOuter").css("transform","rotate(-180deg)"); 
      }, function(){ 
       $("#circleInner").css("transform","rotate(0deg)"); 
       $("#circleOuter").css("transform","rotate(0deg)"); 
      }); 
     }); 
     </script> 
     <style> 
      #circleWrap 
       { 
       background:#ff0; 
       width:200px; 
       height:200px; 
       position:relative; 
       } 

      #circleInner 
       { 
       background:url(http://socalsky.com/_/images/mis/circle_inner.png) center center/ 188px 188px no-repeat; 
       width:200px; 
       height:200px; 
       position:absolute; 
       transform: rotate(0deg); 
       transition: 500ms ease all; 
       } 

      #circleOuter 
       { 
       background:url(http://socalsky.com/_/images/mis/circle_outer.png) center center/ 200px 200px no-repeat; 
       width:200px; 
       height:200px; 
       position:absolute; 
       transform: rotate(0deg); 
       transition: 500ms ease all; 
       } 
     </style> 
    </head> 
    <body> 

     <div id="circleWrap"> 
      <div id="circleInner"> 
      </div> 
      <div id="circleOuter"> 
      </div> 
     </div> 

    </body> 
</html>

來源

2017-04-17 Kobbe

根據您的實際例子，我不認爲有必要觸發事件上懸停的#circleOuter:hover如果兩個元素是容器和觸發的大小進行同時只需使用父來觸發它：

#circleWrap { 
 
    background: #ff0; 
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
} 
 

 
#circleInner { 
 
    background: url(http://socalsky.com/_/images/mis/circle_inner.png) center center/ 188px 188px no-repeat; 
 
    width: 200px; 
 
    height: 200px; 
 
    position: absolute; 
 
    transform: rotate(0deg); 
 
    transition: 500ms ease all; 
 
} 
 

 
#circleOuter { 
 
    background: url(http://socalsky.com/_/images/mis/circle_outer.png) center center/ 200px 200px no-repeat; 
 
    width: 200px; 
 
    height: 200px; 
 
    position: absolute; 
 
    transform: rotate(0deg); 
 
    transition: 500ms ease all; 
 
} 
 
#circleWrap:hover #circleInner{ 
 
    transform: rotate(180deg); 
 
} 
 
#circleWrap:hover #circleOuter{ 
 
    transform: rotate(-180deg); 
 
}

<div id="circleWrap"> 
 
    <div id="circleInner"> 
 
    </div> 
 
    <div id="circleOuter"> 
 
    </div> 
 
</div>

來源

2017-04-17 16:10:36 DaniP

聽起來真的很好DaniP，會試試這個aswel，給我幾個嘗試所有這一切。謝謝一堆！ – Kobbe

這可能是一個問了一個問題。我如何將答案標記爲正確答案？ – Kobbe

@Kobbe您可以在答案左側的投票中看到灰色的複選標記 – DaniP

這對我有效。檢查plunkr。使用純CSS --->https://plnkr.co/edit/FQkBWUNJ79q43eknO7p9?p=preview

#circleWrap:hover>#circleInner{ 
transform: rotate(180deg); 
} 

#circleWrap:hover>#circleOuter{ 
transform: rotate(-180deg); 
}

來源

2017-04-17 16:09:38 lhavCoder

好的，現在就試試這個。感謝ihavCoder。 – Kobbe

當然:)它應該工作正常 – lhavCoder

謝謝你的幫助。 – Kobbe

只需添加下面的CSS和刪除的jQuery。

#circleWrap:hover>#circleInner 
    { 
    transform: rotate(180deg); 
    transition: 500ms ease all; 
    } 

    #circleWrap:hover>#circleOuter 
    { 
    transform: rotate(-180deg); 
    transition: 500ms ease all; 
    }

來源

2017-04-17 16:12:33

謝謝你的幫助。 – Kobbe

我的榮幸@Kobbe –

CSS底層和頂層的懸停觸發器

回答

相關問題