CSS3 - “Collegamento” 2 classi di animazione

ho questo CSS + codice HTML:CSS3 - “Collegamento” 2 classi di animazione

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

Si possono trovare ad esempio dal vivo here. Il problema qui è che qualcosa non va nel secondo codice jQuery. Voglio che ogni volta che metto il mouse sulla scatola o sul triangolo, entrambi cambieranno il loro colore insieme. Quando metto il mouse sulla scatola funziona bene, ma quando metto il mouse sul triangolo non funziona.

Qualche suggerimento su come risolvere questo codice?

fonte

2012-12-03 Nave Tseva

Basta avvolgere la scatola e il triangolo in un contenitore, e si può fare tutto con i CSS e javascript, utilizzando i selettori discendenti sullo stato hover del contenitore:

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

Fiddle here.

fonte

2012-12-03 18:42:53 XML

Grazie! Funziona! –

CSS3 - “Collegamento” 2 classi di animazione

risposta

Problemi correlati