Question

我为我网站上的每个按钮单独编写代码。如何使这个Jquery函数可以用于我想要的每个按钮。

代码如下所示：

＆＃13;

$(document).ready(function() {
    $("#linkXML").hover(
        function() {
            $("#linkXML").css({
                "-webkit-box-shadow": "inset 0px 0px 98px -34px rgba(51,173,255,0.79)",
                "-moz-box-shadow": "inset 0px 0px 98px -34px rgba(51,173,255,0.79)",
                "box-shadow": "inset 0px 0px 98px -34px rgba(51,173,255,0.79)"
            });
        },
        function() {
            $("#linkXML").css({
                "-webkit-box-shadow": "",
                "-moz-box-shadow": "",
                "box-shadow": ""
            });
        }
    );
});

＆＃13;

基本上，我只是复制粘贴每个按钮的代码，只更改了它所调用的元素。

如果你非常友好地告诉我如何使它成为一个单一的函数我可以给一个元素，它会调用它上面的函数。

Answer 1

我会使用CSS作为预期，而不是JS。

#linkXML
{
    // your styles, if any
}

#linkXML:hover
{
    -webkit-box-shadow: inset 0px 0px 98px -34px rgba(51,173,255,0.79);
    -moz-box-shadow": "inset 0px 0px 98px -34px rgba(51,173,255,0.79);
    box-shadow: inset 0px 0px 98px -34px rgba(51,173,255,0.79);
}

如果您需要多个元素的这种风格，那么应用一个类。

Answer 2

为什么不在jQuery选择器中选择button元素？

＆＃13;

$(document).ready(function() {
    $("button").hover(
        function() {
            $(this).css({
                "-webkit-box-shadow": "inset 0px 0px 98px -34px rgba(51,173,255,0.79)",
                "-moz-box-shadow": "inset 0px 0px 98px -34px rgba(51,173,255,0.79)",
                "box-shadow": "inset 0px 0px 98px -34px rgba(51,173,255,0.79)"
            });
        },
        function() {
            $(this).css({
                "-webkit-box-shadow": "",
                "-moz-box-shadow": "",
                "box-shadow": ""
            });
        }
    );
});

＆＃13;

Answer 3

如果您为所有按钮指定了一个类名，那么它们将全部被选中

$(document).ready(function() {
    $(".linkXML").hover(
        function() {
            $(".linkXML").css({
                "-webkit-box-shadow": "inset 0px 0px 98px -34px rgba(51,173,255,0.79)",
                "-moz-box-shadow": "inset 0px 0px 98px -34px rgba(51,173,255,0.79)",
                "box-shadow": "inset 0px 0px 98px -34px rgba(51,173,255,0.79)"
            });
        },
        function() {
            $(".linkXML").css({
                "-webkit-box-shadow": "",
                "-moz-box-shadow": "",
                "box-shadow": ""
            });
        }
   );
});

Answer 4

改为使用班级。

$(document).ready(function() {
  $(".linkXML").hover(
    function() {
      $(this).css({
        "-webkit-box-shadow": "inset 0px 0px 98px -34px rgba(51,173,255,0.79)",
        "-moz-box-shadow": "inset 0px 0px 98px -34px rgba(51,173,255,0.79)",
        "box-shadow": "inset 0px 0px 98px -34px rgba(51,173,255,0.79)"
      });
    },
    function() {
      $(this).css({
        "-webkit-box-shadow": "initial",
        "-moz-box-shadow": "initial",
        "box-shadow": "initial"
      });
    }
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="linkXML">Button</button>
<button class="linkXML">Button</button>
<button class="linkXML">Button</button>

<强>推荐：

如果你可以使用CSS，最好在那里添加一个类并设置按钮的样式。

.linkXML:hover {
  -webkit-box-shadow: inset 0px 0px 98px -34px rgba(51, 173, 255, 0.79);
  -moz-box-shadow: inset 0px 0px 98px -34px rgba(51, 173, 255, 0.79);
  box-shadow: inset 0px 0px 98px -34px rgba(51, 173, 255, 0.79);
}

<button class="linkXML">Button</button>
<button class="linkXML">Button</button>
<button class="linkXML">Button</button>

如果您的链接在.xml属性中引用了href文件，则可以使用substring matching attribute selector：

a[href$=".xml"] {
  -webkit-box-shadow: inset 0px 0px 98px -34px rgba(51, 173, 255, 0.79);
  -moz-box-shadow: inset 0px 0px 98px -34px rgba(51, 173, 255, 0.79);
  box-shadow: inset 0px 0px 98px -34px rgba(51, 173, 255, 0.79);
}

<a href="example.xml">Link</a>
<a href="example.xml">Link</a>
<a href="example.xml">Link</a>

我编写了Jquery代码，用于在悬停时更改按钮，但我为每个按钮单独编写代码。我如何使它成为一个功能

4 个答案: