別の部門（複雑な属性を持つ）からCSSホバーをトリガーするには

私はこれを初めて使い、丁寧に/正しく質問したいと思っていますか？（私はこれまでのコードを含んでいます）別の部門（複雑な属性を持つ）からCSSホバーをトリガーするには

私は '#spiral' divの上にホバーすることによって '#blueBar'のホバーを適用しようとしています。 CSS、JQuery、Javascriptをしばらく使ってみましたが、役に立たないです。

最後に、2つの 'blueBars'をBadge.pngの背後で交差させたいと思います。「らせん状」の上にホバリングすると、バッジが回転し、2つの「blueBars」の倍率がbadge.pngの後ろからはみ出していきたいです。

多くのありがとうございます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


<!doctype HTML> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <style> 
     #spiral{ 
      border-radius: 50%; 
      background-image: url(badge.png); 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      width: 350px; 
      height: 350px; 
      transition:all 1s ease-out; 

      transform:rotate(0deg) infinite; 
      -webkit-transform:rotate(0deg) infinite; 
      -moz-animation: rotate(0deg) infinite; 
      -ms-animation: rotate(0deg) infinite; 
      -o-animation: rotate(0deg) infinite; 
      animation: rotate(0deg) infinite;/* Safari and Chrome */ 
      } 


     #spiral:hover, #blueBar.hovered { 
      display: block; 
      width:350px; 
      height:350px; 
      border-radius: 50%; 
      background-image: url(badge.png); 
      -webkit-animation: spin 1s linear infinite; 
      -moz-animation: spin 1s linear infinite; 
      -ms-animation: spin 1s linear infinite; 
      -o-animation: spin 1s linear infinite; 
      animation: spin 1s linear infinite; 
      } 


     @keyframes spin { 
      0% { transform: rotate(0deg); } 
      100% { transform: rotate(360deg); } 
      } 
     @-webkit-keyframes spin { 
      0% {-webkit-transform: rotate(0deg); } 
      100% { -webkit-transform: rotate(360deg); } 
      } 
     @-ms-keyframes spin { 
      0% {-ms-transform: rotate(0deg); } 
      100% { -ms-transform: rotate(360deg); } 
      } 
     @-moz-keyframes spin { 
      0% { -moz-transform: rotate(0deg); } 
      100% { -moz-transform: rotate(360deg); } 
      } 
     @-o-keyframes spin { 
      0% { -o-transform: rotate(0deg); } 
      100% { -o-transform: rotate(360deg); } 
      } 



     #blueBar { 
      width: 28px; 
      height: 28px; 
      background: #25cadb; 

      -moz-transform: rotate(45deg); 
      -webkit-transform: rotate(45deg); 
      -ms-transform: rotate(45deg); 
      -o-transform: rotate(45deg); 
      transform: rotate(45deg); 
      } 

     #blueBar:hover, .blueBar.hover{ 
      width: 28px; 
      height: 28px; 
      background: #25cadb; 

      -moz-transform: rotate(45deg) scale(1, 10); 
      -webkit-transform: rotate(45deg) scale(1, 10); 
      -ms-transform: rotate(45deg) scale(1, 10); 
      -o-transform: rotate(45deg) scale(1, 10); 
      transform: rotate(45deg) scale(1, 10); 
      } 
</style> 
<meta HTTP-equiv="Content-Type" content="text/HTML; char-set=UTF-8"> 

    <title>Animated Features</title> 
    <link rel="stylesheet" href="style.css"> 
    <link rel="shortcut icon" href="almost.ico" type="image/x-icon"> 

</head> 

    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family: Georgia, Times, serif"> 

      <center> 

       <div style="height: 350px">&nbsp;</div> 
        <script> 
         $('#spiral').on('mouseenter mouseleave', function(e) { 
         $('#blueBar:hover').trigger(e.type); 
         }) 
        </script> 
       <div width="800px"> 

       <div id="spiral"> 
        <div id="spiral1"> 

        </div> 
       </div> 

       <div id="blueBar" > &nbsp; </div> 

       </div> 

     </center> 
    </body> 
</html>

出典

2016-06-17 Kieran Stafford

兄弟セレクタを使用できます。 #spiralがホバーしたとき

#spiral:hover ~ #blueBar { 
    background: red; 
}

#blueBarが赤くなります。

例はon JSFiddle hereです。「スパイラル」divの上にカーソルを置いて、「青いバー」の部分が赤くなることに注意してください。

出典

2016-06-17 13:50:02

こんにちはJamesさん、ありがとうございました。これは馬鹿に聞こえるかもしれませんが、私がマウスを動かすと＃螺線の周りに境界線を置き、線を取り除くことはできませんか？ –

ちょっと@ user2996159、それはできません。 JSFiddleの例の要素の周りに境界線を追加して、影響を受けるビットを確認できるようにしました。 –

James Mongerの回答のように要素が常に兄弟であるとは限らない場合は、#blueBar：hoverでCSSを.hoverというクラスに転送できます。次に、あなたのjQueryのでは次のように記述します。

$('#spiral').on('mouseenter mouseout', function(){ 
    $('#blueBar').toggleClass('hover'); 
});

フィドル：https://jsfiddle.net/xk9ckcrk/2/

私は何が起こっているより簡単に表示するためにCSSを少し修正しました。 .hoverクラスに必要なアニメーションやトランスフォームを追加して動作させることができるはずです。

出典

2016-06-17 13:54:25 Cruiser

私はこれを動作させることができませんでした。 –

働いているフィドルで私の編集を見てください – Cruiser

別の部門（複雑な属性を持つ）からCSSホバーをトリガーするには

答えて

関連する問題