Question

我有两个问题，因为我很新。

1）有没有办法简化这段代码？基本上在元素悬停时会出现div。当你用鼠标重复时，我想复制网站http://indicius.com/的社交图标上的效果。这是创建此效果的正确方法吗？

2）有人可以在这里向我解释逗号功能吗？我的意思是在一个事件中，我看到两个功能（实际上正在做我正在寻找的工作），但我想了解逗号是什么意思？我想了解第二个＆＃34;位置＆＃34;在逗号进入事件后表示。

希望很清楚。

$(".social-size-logo").hover(
  function() {
    $(".color-social-div").css({
      "opacity": "1",
      "z-index": "999"
    });
  },
  function() {
    $(".color-social-div").css({
      "opacity": "0",
      "z-index": "-1"
    });
  });

Answer 1

jQuery的悬停函数接受两个方法作为参数，第一个在鼠标输入时执行所选元素，第二个在鼠标离开元素时执行。

$(element).hover( mouseInHandler, mouseOutHandler );

您可以阅读更多相关信息here

现在，来到你发布的片段，我会尝试内联解释

$(".social-size-logo").hover( // Attach the hover event handler
  function() { // This is the `mouseIn` method
    $(".color-social-div").css({ //We add the CSS to make the element visible, 
      "opacity": "1", // set the opacity to 1 to make it visible
      "z-index": "999" // bump up the z-index to bring it to the top
    });
  },
  function() {// This is the `mouseOut` method
    $(".color-social-div").css({
      "opacity": "0",
      "z-index": "-1"
    });
  });

有许多奇特的动画和过渡组合在一起制作动画，但这一切归结为：

用户进入社交图标区域 - ＆gt;启动将页面包装器置于焦点的事件，并将其置于其他所有内容之上
显示图标的相应叠加层 提示：检查div.overlays-wrapper元素在悬停时的行为以了解此
当用户离开时 - ＆gt;重置一切

有没有更简单的方法来简化此代码？也可以有人解释逗号吗？

1 个答案: