Question

我的作业要求我只使用jquery。似乎不实用，但我有限。我能够弄清楚如何进行悬停状态但是当样式被应用时，它会保留。所以看看这个..

$(".cta-button").css({
      background: "#476887",
      "text-align": "center",
      width: "173px",
      height: "40px",
      margin: "62px auto 33px",
      cursor: "pointer"
    });
    $(".cta-button").hover(function() {
      $(this).css("background-color", "#509de5");
    });

当然，当我不再徘徊时，我希望它恢复原来的背景颜色。我该怎么做呢？谢谢！

Answer 1

您可以使用hover method of jQuery

轻松实现这一目标

如文档中所述，此方法可以接受一到两个参数，第一个称为handlerIn，可以转换为悬停状态，鼠标输入等，handlerOut对于鼠标离开＆＃39;

所以为了实现你想要的东西，你可以尝试这样的东西

$('DOM_NODE').hover(mouseEnter, mouseLeave);
function mouseEnter() {
     // do something when the mouse enters the dom node 
};
function mouseLeave() {
     // do something when the mouse leaves the dom node
};

Answer 2

您可以添加鼠标悬停事件
a fiddle

$(".cta-button").css({
      background: "#476887",
      "text-align": "center",
      width: "173px",
      height: "40px",
      margin: "62px auto 33px",
      cursor: "pointer"
    });
    $(".cta-button").hover(function() {
      $(this).css("background-color", "#509de5");
    }).mouseover(function() {
      $(this).css("background-color", "#476887");
    });

如何用jQuery反转悬停状态？

2 个答案: