Javascript 当一个元素悬停在另一个元素上时，使用jQuery将一个元素分配给一个类

我正在尝试在页面的两侧创建效果，当页面中心的div悬停在上方时，将显示这些效果。我正在使用jQuery来实现这一点

我已经尝试了我最有用的诊断技术（对我的JS的某些部分使用警报），但我似乎不明白为什么我的代码没有运行

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>
<script>
  $( "#shadow" ).hover(
    function() {
      $( "#wingRight" ).addClass( "shown" );
    }, function() {
      $( "#wingRight" ).removeClass( "shown" );
    }
  );
  $( "#light" ).hover(
    function() {
      $( "#wingLeft" ).addClass( "shown" );
    }, function() {
      $( "#wingLeft" ).removeClass( "shown" );
    }
  );
</script>

$（“#阴影”）。悬停(
函数（）{
$（“#wingRight”）.addClass（“显示”）；
}，函数（）{
$（“#wingRight”）.removeClass（“显示”）；
}
);
$（“#灯”）。悬停(
函数（）{
$（“#wingLeft”）.addClass（“显示”）；
}，函数（）{
$（“#wingLeft”）.removeClass（“显示”）；
}
);

---

提前谢谢

这是因为你的

#wingLeft

和

#wingRight

有

0高度（至少你的代码笔是这样的）。
这是因为你的
#wingLeft
和
#wingRight
有
0高度（至少你的代码笔是这样的）.
尝试在wingLeft和wingRight div上添加最小高度，以便可以看到悬停的div

#wingLeft{
    width: 33.3%;
    height: 100%;
    min-height: 50px;
}
#wingRight{
    width: 33.3%;
    height: 100%;
    min-height: 50px;
}

尝试在wingLeft div和wingRight div上添加minheight，以便可以看到悬停的div

#wingLeft{
    width: 33.3%;
    height: 100%;
    min-height: 50px;
}
#wingRight{
    width: 33.3%;
    height: 100%;
    min-height: 50px;
}

元素的高度基于其内容。当您将高度指定为百分比时，就像您对#wingLeft和#wingRight所做的那样，您将获得0的100%，即0

如果您的类为高度指定了一个硬值，例如100px，那么jQuery就可以正常工作。这是你最新的钢笔


注意，给它们高度也会使你的曼荼罗居中

PS-CodePen为您提供了
，而
可以放在JS字段中。在设置选项卡中，您可以加载jQuery，而无需在文本中链接它
 元素的高度取决于其内容。当您将高度指定为百分比时，就像您对#wingLeft和#wingRight所做的那样，您将获得0的100%，即0

如果您的类为高度指定了一个硬值，例如100px，那么jQuery就可以正常工作。这是你最新的钢笔


注意，给它们高度也会使你的曼荼罗居中

PS-CodePen为您提供了
，而
可以放在JS字段中。在设置选项卡中，您可以加载jQuery，而无需在文本中链接它
 元素div#wingLeft和#wingRight应该包含某些内容或为它们指定最小高度。如果没有指定高度或没有子元素包含，你将看不到该div。
元素div#wingLeft和#wingRight应该包含某些内容或为它们指定最小高度。如果没有指定高度或没有子元素包含，你将看不到该div。
id=“wingLeft”和id=“wingRight”中的内容。尝试添加一些内容，并在$（function（）{//your event binding}）中绑定事件；以便在文档上运行它load@GvM这不应该是一个问题div wingLeft和wingRight应该有一个高度或内容，以便您可以检查代码是否正常工作。尝试检查@sea您在id=“wingLeft”和id=“wingRight”中没有任何内容。尝试添加一些内容，并在$（function（）{//your event binding}）中绑定事件；以便在文档上运行它load@GvM这不应该是一个问题。div wingLeft和wingRight应该有一个高度或内容，以便您可以检查代码是否正常工作。请尝试检查@SeanThanks是否为您提供了代码笔。我将高度设置为100%，我认为这是身体的全部高度，这。。。想想看，我不确定我是否定义了它的高度。他们可能是个问题。@SeanWoodfin，没问题。您可能还对单位
vw
和
vh
感兴趣。它们是介于百分比和固定数字之间的两个单词中最好的
100vw
等于视口宽度的100%，而
100vh
等于视口高度的100%——区别在于vw/vh以数字而不是百分比计算。是的，你总是想定义身体的尺寸。我的CSS几乎总是以
body{width:100vw；height:100vh；}
开头，谢谢你为我提供了一个代码笔。我将高度设置为100%，我认为这是身体的全部高度，这。。。想想看，我不确定我是否定义了它的高度。他们可能是个问题。@SeanWoodfin，没问题。您可能还对单位
vw
和
vh
感兴趣。它们是介于百分比和固定数字之间的两个单词中最好的
100vw
等于视口宽度的100%，而
100vh
等于视口高度的100%——区别在于vw/vh以数字而不是百分比计算。是的，你总是想定义身体的尺寸。我的CSS几乎总是以
body{width:100vw；height:100vh；}