Question

我正在尝试在页面中间的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>

check out these

提前致谢！

Answer 1

这是因为您的#wingLeft和#wingRight有0 height（至少在您的代码中会发生这种情况）。

Answer 2

尝试在wingLeft div和wingRight div上添加一个minheight，这样你就可以看到悬停的div。

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

Answer 3

元素的高度取决于其内容。当您将高度指定为百分比时，就像使用#wingLeft和#wingRight一样，您将获得100％的0，即0。

如果你的类为高度分配了一个硬值，比如100px，你的jQuery就可以了。这是你更新的笔。

http://codepen.io/WallyNally/pen/QKeeRj

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

PS - CodePen包含<head>，<script>可以包含在JS字段中。在设置选项卡中，您可以加载jQuery而无需在文本中链接它。

Answer 4

元素div #wingLeft和#wingRight应该包含一些内容或者给它们min-height.u如果没有给出高度或者没有包含子，则不会看到div。

当另一个元素悬停时，使用jQuery为一个元素分配一个类

4 个答案: