CSS3 - 2クラスのアニメーション

を「結ぶ」私はこのCSS + HTMLコードを持っている：CSS3 - 2クラスのアニメーション

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>What</title> 
    <style type="text/css"> 
     #page { 
      width: 900px; 
      padding: 0px; 
      margin: 0 auto; 
      direction: rtl; 
      position: relative; 
     } 

     #box1 { 
      position: relative; 
      width: 500px; 
      border: 1px solid black; 
      box-shadow: -3px 8px 34px #808080; 
      border-radius: 20px; 
      box-shadow: -8px 5px 5px #888888; 
      right: 300px; 
      top: 250px; 
      height: 150px; 
      -webkit-transition: all 1s; 
      font-size: large; 
      color: Black; 
      padding: 10px; 
      background: #D0D0D0; 
      opacity: 0; 
     } 


     @-webkit-keyframes myFirst { 
      0% { 
       right: 300px; 
       top: 150px; 
       background: #D0D0D0; 
       opacity: 0; 
      } 

      100% { 
       background: #909090; 
       ; 
       right: 300px; 
       top: 200px; 
       opacity: 1; 
      } 
     } 

     #littlebox1 { 
      top: 200px; 
      position: absolute; 
      display: inline-block; 
     } 

      .littlebox1-sentence { 
       font-size: large; 
       padding-bottom: 15px; 
       padding-top: 15px; 
       padding-left: 25px; 
       padding-right: 10px; 
       background: #D0D0D0; 
       border-radius: 10px; -webkit-transition: background .25s ease-in-out; 
      } 

      #littlebox1:hover ~ #box1 { 
       -webkit-transition: all 0s; 
       background: #909090;; 
       right: 300px; 
       top: 200px; 
       -webkit-animation: myFirst 1s; 
       -webkit-animation-fill-mode: initial; 
       opacity: 1; 

      } 
     .littlebox1-sentence:hover { 
    background: #909090; 
} 
.littlebox1-sentence:hover + .triangle { 
    border-right: 50px solid #909090; 
} 

      .triangle { 
       position: relative; 
       width: 0; 
       height: 0; 
       border-right: 50px solid #D0D0D0; 
       border-top: 24px solid transparent; 
       border-bottom: 24px solid transparent; 
       right: 160px; -webkit-transition: border-right .25s ease-in-out; 

      } 
     .triangle:hover { 
       border-right:50px solid #909090; 

      } 
    </style> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script>  
    $(function() { 
    $('.littlebox1-sentence').hover(function() { 
    $(this).css('background', '#909090'); 
    $('.triangle').css('border-right', '50px solid #909090'); 
    }); 

    </script> 
    <script> $(function() { 
    $('.triangle').hover(function() { 
    $(this).css('border-right', '50px solid #909090'); 
    $('.littlebox1-sentence').css('background', '#909090'); 
    }); 
</script> 
</head> 
<body dir="rtl"> 
    <div id="page"> 
     <div id="littlebox1" class="littlebox1-sentence">put your mouse here</div><div id="littlebox1" class="triangle"> </div> 
     <div id="box1"> 
         </div> 
     </div> 


</body> 
</html>

あなたが生き例hereを見つけることができます。ここでの問題は、2番目のjQueryコードで何かが間違っていることです。私はボックスや三角形の上にマウスを置くたびに、両方とも一緒に色を変えることを望んでいます。ボックスにマウスを置くと正常に動作しますが、マウスを三角に置くと機能しません。

このコードを修正する方法を教えてください。

出典

2012-12-03 Nave Tseva

ちょうど箱やコンテナ内の三角形をラップし、あなたは、コンテナのホバー状態に子孫セレクタを使用することにより、CSSなしJavaScriptでそれをすべて行うことができます。

#bothcontainer:hover ~ #box1 { ... } 
#bothcontainer:hover .littlebox1-sentence { ... } 
#bothcontainer:hover .triangle { ... }

フィドルhereを。

出典

2012-12-03 18:42:53 XML

ありがとうございました！できます！ –

CSS3 - 2クラスのアニメーション

答えて

関連する問題