Css jQuery悬停切换_Css_Jquery Hover_Jquery

Css jQuery悬停切换

css jquery

Css jQuery悬停切换,css,jquery-hover,jquery,Css,Jquery Hover,Jquery,我正试图使用这个jQuery来激活我的css转换。另外，当鼠标悬停在div“box”上时，我希望它能够激活另一个名为“box\u content”的div的淡入任何帮助都将不胜感激。谢谢 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>test</title> <style>

我正试图使用这个jQuery来激活我的css转换。另外，当鼠标悬停在div“box”上时，我希望它能够激活另一个名为“box\u content”的div的淡入

任何帮助都将不胜感激。谢谢

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


测试
分区箱{
排名：0；
左：0；
宽度：100px；
高度：100px；
背景：#0F0；
不透明度：.3；
-webkit过渡：所有.5s轻松输入输出；
-moz过渡：所有.5s轻松输入输出；
过渡：全部。5s轻松进出；
}
div.box.active{
不透明度：1；
}
div.box\u内容{
-webkit过渡：所有1.5s易入易出；
-moz过渡：所有1.5s的易入易出；
过渡：所有1.5s的轻松进出；
不透明度：0；
}
div.box\u content.active{
不透明度：1；
}
$（文档）.ready（函数（）
$（'div.box'）。悬停（函数（）{
$（'div.box'）。toggleClass（'active'）；
$（'div.box_content'）。toggleClass（'active'）；
}
内容

您的jQuery中有一些语法错误。如果您修复了这些错误，它就会正常工作。

给你。：）你丢失了几个花括号，这是一个错误

非常感谢！我真的很感激！

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

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