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

Question

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

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

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

希望是明确的。

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

有很多花哨的动画和过渡组合在一起制作该动画，但归结为：

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

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

Is There an easier way to simplify this code? Also can someone explain the comma?

javascript

jquery

function

comma

hover