下層レイヤーと上層レイヤーのCSSホバートリガー

両方のレイヤーのCSSホバートランジションを行う方法。私はあなたのコンピュータのデスクトップから（コピー/貼り付け）できるようにページ全体を書きました。私は何をしているのですが、純粋なCSSを使ってjavascript/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をイベントをトリガする必要が表示されていない純粋なCSS --->を使用して行います同じ時間はちょうどそれをトリガーする親を使用します。

#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も本当にいいですね。これを試してみてください。本当にありがとう！ – Kobbe

これはおそらく1年後の質問です。回答を正しい回答として再度マークするにはどうすればよいですか？ – Kobbe

@ Kobbeあなたがマークしたい回答の左側の票の下に灰色のチェックマークが表示されます – DaniP

これは私に役立ちました。 plunkrをチェックしてください。両方の要素は、コンテナとトリガでのサイズであれば、あなたの実際の例に基づいて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ホバートリガー

答えて

関連する問題