Javascript 如何在jQuery中重用自定义函数来应用多个css属性？

超级简单的概念，但它给我带来了麻烦

共5个部门 第一个div居中，z向前方分度。 其他4个div分别为页面的1/4。悬停时，每个应用程序都会对第一个div应用一个唯一的css属性

或者这是代码：

$(document).ready(function(){
  function point(a, b, c, d) {
    $(".middle").css("transition", ".15s ease-in-out all");
    $(".middle").css("border-radius", a . "% " . b . "% " . c . "% " . d . "%");
  }

  function unpoint() {
    $(".middle").css("transition", ".15s ease-in-out all");
    $(".middle").css("border-radius", "50% 50% 50% 50%");
  }

  $(".section-1")
    .on( "mouseenter", point(0, 50, 50, 50) )
    .on( "mouseleave", unpoint() );
});

---

谢谢你的帮助

你可以制作一个小插件

(function($) {
  function mouseenter(a, b, c, d) {
    $(".middle", this).css({
      transition: ".15s ease-in-out all",
      borderRadius: [a, b, c, d].map(function(side) { return side+"%"; }).join(" ");
    });
  }

  function mouseleave() {
    $(".middle", this).css({
      transition: ".15s ease-in-out all",
      borderRadius: "50%"
    });
  }

  $.fn.point = function(a, b, c, d) {
    return this.each(function(idx, elem)) {
      $(elem).hover(
        function() { mouseenter.call(this, a, b, c, d); },
        function() { mouseleave.call(this); }
      );
    });
  };
})(jQuery);

那么你可以这样使用它

$(document).ready(function() {
  $(".section-1").point(0, 50, 50, 50);
});

---

在我的第一个观点中，我发现您的代码存在一些问题

第1个问题：给定行中存在语法错误。它应该是+而不是.dot

$(".middle").css("border-radius", a + "% " + b + "% " + c + "% " + d + "%");

第二个问题：您没有将函数分配给callback，只是调用了该函数。正确的语法应该是

$(".section-1")
    .on( "mouseenter", point )
    .on( "mouseleave", unpoint );