jQuery懸停切換

我想使用這個jQuery來激活我的CSS轉換。此外，在懸停在div「盒子」上時，我希望這可以激活另一個名爲「box_content」的div的淡入。jQuery懸停切換

任何幫助，將不勝感激。謝謝！

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <title>test</title> 
    <style> 
     div.box{ 
      top: 0; 
      left: 0; 
      width: 100px; 
      height: 100px; 
      background: #0F0; 
      opacity: .3; 
      -webkit-transition: all .5s ease-in-out; 
      -moz-transition: all .5s ease-in-out; 
      transition: all .5s ease-in-out; 
     } 

     div.box.active{ 
      opacity: 1; 
     } 

     div.box_content{ 
      -webkit-transition: all 1.5s ease-in-out; 
      -moz-transition: all 1.5s ease-in-out; 
      transition: all 1.5s ease-in-out; 
      opacity: 0; 
     } 

     div.box_content.active { 
      opacity: 1; 
     } 
    </style> 

    <script> 
     $(document).ready(function() 
      $('div.box').hover(function() { 
     $('div.box').toggleClass('active'); 
     $('div.box_content').toggleClass('active'); 
     } 
    </script> 
</head> 
<body> 
     <div class="box"></div> 
     <div class="box_content">Content</div> 
</body>

來源

2012-03-30 user1304264

你必須在你的jQuery一些語法錯誤。如果你解決這些問題，它就可以。 http://jsfiddle.net/michaeljimmy/brmF3/

$(document).ready(function() { 
    $('div.box').hover(function() { 
     $('div.box').toggleClass('active'); 
     $('div.box_content').toggleClass('active'); 
    }); 
});

來源

2012-03-30 23:20:01

在這裏你去。 :)你錯過了一些拋出錯誤的大括號。

You can play around with it here:

$(function() { 
     $('div.box').hover(function() { 
      $(this).toggleClass('active'); 
      $('div.box_content').toggleClass('active'); 
     }); 
    });

來源

2012-03-30 23:24:32

非常感謝！：D我真的很感激它！ – user1304264 2012-03-30 23:37:57

jQuery懸停切換

回答

相關問題