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

【问题标题】：Is There an easier way to simplify this code? Also can someone explain the comma?有没有更简单的方法来简化这段代码？也有人可以解释逗号吗？
【发布时间】：2017-04-10 20:34:20
【问题描述】：

我有两个问题，因为我是新手。

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

2）有人可以在这里向我解释逗号功能吗？我的意思是在一个事件中我看到两个函数（它们实际上正在做我正在寻找的工作）但我想了解逗号是什么意思？我想了解事件中逗号后的第二个“位置”是什么意思。

希望很明确。

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

【问题讨论】：

查看hover()的文档。
.hover( handlerIn, handlerOut )
你应该改用 CSS :hover 选择器。
这是两个参数，就像任何其他参数一样。
同意 SLaks。如果只是管理 css，请仅使用 css。如果您需要 js 中的任何其他行为，则使用 js 事件。

标签： javascript jquery function hover comma

【解决方案1】：

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

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

您可以阅读更多关于它的信息here

现在，来到你发布的 sn-p，我将尝试内联解释它

$(".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"
    });
  });

有很多花哨的动画和过渡结合在一起制作动画，但归根结底是：

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

【讨论】：