jQuery Hover Toggling

私はこのjQueryを使用してCSS遷移をアクティブにしようとしています。また、divの "box"をホバリングすると、 "box_content"という別のdivのフェードインを有効にしたかったのです。jQuery Hover Toggling

ご協力いただければ幸いです。ありがとう！

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

答えて

関連する問題