CSS3 - „Connecting” 2 zajęcia animacyjne

mam to CSS + HTML kod:CSS3 - „Connecting” 2 zajęcia animacyjne

<!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>

można znaleźć przykładowe żywo here. Problem polega na tym, że coś jest nie tak w drugim kodzie jQuery. Chcę, aby za każdym razem, gdy kładę mysz na pudełku lub na trójkącie, obie zmieniają razem kolor. Kiedy umieścisz mysz na pudełku, działa dobrze, ale kiedy umieścisz mysz na trójkącie, to nie działa.

Wszelkie sugestie, jak naprawić ten kod?

Źródło

2012-12-03 Nave Tseva

Wystarczy owinąć pudełko i trójkąt w pojemniku, a można to wszystko zrobić z CSS i bez javascript, za pomocą selektorów potomka od stanu aktywowania pojemnika:

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

Fiddle here.

Źródło

2012-12-03 18:42:53 XML

Dziękujemy! To działa! –

CSS3 - „Connecting” 2 zajęcia animacyjne

Odpowiedz

Powiązane problemy