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。這裏的問題是第二個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類動畫

回答

相關問題