Javascript jQuery mouseenter（）函数未按预期工作

我正在尝试创建一个div。当在其上悬停时（我使用

mouseenter

和

mouseleave

jquery函数），div会更改其大小，当单击它时，它会显示另一个div。为此，我使用

单击
函数。有时有效，有时无效。这是我的jquery代码


$（文档）.ready（函数（）{
$（'.box'）.mouseenter（函数（）{
$（'.mainBox'）.css（'font-size'，'32px'）；
$（'.box'）.css（'overflow'，'auto'）；
$（'.box'）。单击（函数（e）{
e、 预防默认值（）；
console.log（'clicked'）；
$（'.box2'）.css（'display'，'block'）；
});
});
$（'.mainBox'）.mouseleave（函数（）{
$（'.mainBox'）.css（'font-size'，'16px'）；
$（'.box'）.css（'overflow'，'auto'）；
$（'.box'）.css（'background-color'，'white'）；
});
}); // 文档结束准备功能
正文{
填充：0；
保证金：0；
背景颜色：浅灰色；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：16px；
}
.mainBox{
保证金：自动；
边缘顶部：20px；
边框：1px实心；
背景色：白色；
填充：10px；
宽度：80%；
调整大小：两者；
溢出：自动；
转换：字体大小。5s；
}
.dBox{
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
用户选择：无；
保证金：自动；
边缘顶部：20px；
边框：1px纯色灰色；
宽度：80%；
填充：20px；
背景色：gainsboro；
}
.盒子{
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
用户选择：无；
边框：1px纯白；
填充：20px；
背景色：gainsboro；
}
.box2{
边框：1px纯色灰色；
填充：20px；
背景色：gainsboro；
显示：无；
}

Vantablack是英国萨里纳米系统公司开发的一种材料，是已知最暗的物质之一，吸收高达99.965%的可见光（如果光垂直于该材料，则为663 nm）
第二个盒子是Lorem ipsum，dolor sit amet Concertetur Adipsicing Elite。发明人尤斯托铜化尼莫。
我的同僚们都是精英。非dolorum别名被认为是一种自由的行为，doloribus amet eveniet sit modi est QUERATURM nostrum CONSEQUATURE！
英国工程公司萨里纳米系统公司（Surrey NanoSystems）正在展示被称为“世界上最暗材料”的最新（也是最黑）版本，该公司称之为Vantablack。该材料吸收高达99.965%的入射辐射，包括可见光
光和其他常见频率，如微波和无线电波。结果是一片漆黑，更像是一个无底洞，没有任何光线可以从里面出来您正在链接多个事件绑定。在代码中，每次触发鼠标指针时，都会向click事件添加一个新的回调


$（文档）.ready（函数（）{
$（'.box'）.mouseenter（函数（）{
$（'.mainBox'）.css（'font-size'，'32px'）；
$（'.box'）.css（'overflow'，'auto'）；
});
$（'.mainBox'）.mouseleave（函数（）{
$（'.mainBox'）.css（'font-size'，'16px'）；
$（'.box'）.css（'overflow'，'auto'）；
$（'.box'）.css（'background-color'，'white'）；
});
$（'.box'）。单击（函数（e）{
e、 预防默认值（）；
如果（$（'.box2'）.css（'display'）='block'）{
$（'.box2'）.css（'display'，'none'）；
}否则{
$（'.box2'）.css（'display'，'block'）；
}
});
}); // 文档结束准备功能
正文{
填充：0；
保证金：0；
背景颜色：浅灰色；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：16px；
}
.mainBox{
保证金：自动；
边缘顶部：20px；
边框：1px实心；
背景色：白色；
填充：10px；
宽度：80%；
调整大小：两者；
溢出：自动；
转换：字体大小。5s；
}
.dBox{
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
用户选择：无；
保证金：自动；
边缘顶部：20px；
边框：1px纯色灰色；
宽度：80%；
填充：20px；
背景色：gainsboro；
}
.盒子{
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
用户选择：无；
边框：1px纯白；
填充：20px；
背景色：gainsboro；
}
.box2{
边框：1px纯色灰色；
填充：20px；
背景色：gainsboro；
显示：无；
}

Vantablack是英国萨里纳米系统公司开发的一种材料，是已知最暗的物质之一，吸收高达99.965%的可见光（如果光垂直于该材料，则为663 nm）
第二个盒子是Lorem ipsum，dolor sit amet Concertetur Adipsicing Elite。发明人尤斯托铜化尼莫。
我的同僚们都是精英。非dolorum别名被认为是一种自由的行为，doloribus amet eveniet sit modi est QUERATURM nostrum CONSEQUATURE！
英国工程公司萨里纳米系统公司（Surrey NanoSystems）正在展示被称为“世界上最暗材料”的最新（也是最黑）版本，该公司称之为Vantablack。该材料吸收高达99.965%的入射辐射，包括可见光
光和其他常见频率，如微波和无线电波。结果是一片漆黑，更像是一个无底洞，没有任何光线可以从里面出来谢谢！但我如何才能解决这个问题。也需要这个功能。我想做的是“当一些鼠标悬停在盒子上时，它会缩放（字体大小增加），当有人点击它时，新的div（第二个盒子）会在第二次点击时出现。新的div（第二个盒子）消失。问题解决了。我分离了鼠标和单击功能，现在它工作正常。谢谢。