在准备好时添加 Class，在 mouseenter 时删除 class

Question

我正在创建我的投资组合网站。我希望在文档准备好时添加 class，并在悬停时将 class 添加到另一个 class remove/change。我在加载和悬停时对我的图像使用 lightgallery 和 CSS 克过滤器。之前，我添加了一个列表。不幸的是，它不能很好地满足我的需求。

$("#gallery a").on({
  mouseenter : function() {
    $(this).find(".nak-gallery-poster").removeClass("inkwell").addClass("mayfair");
  },
  mouseleave : function() {
    $(this).find(".nak-gallery-poster").removeClass("mayfair").addClass("inkwell");
  }
});

我更改了 jQuery 以匹配之前代码中的内容。这没有用。请帮忙。我的 CodePen

Answer 1

而不是使用两个 class 像这样编辑你的 css

.inkwell{
color: red;
}
.inkwell:Hover{
color: blue
}

这比 jquery 更简单、更简洁，您可以根据需要添加背景颜色和任何您想要的东西

Answer 2

删除代码

$lg.lightGallery();
  $lg.append(slide);
  $lg.data('lightGallery').destroy(true);
  $lg.lightGallery();

从你的codepen，然后一切正常

好像你错过了一些插件或放置了错误的代码

Answer 3

您好，我在 codepen 中查看了您的代码，发现您没有在 document.ready(function(){ ... } 中包含 mouseenter 和其他方法方法。我想 post 这是评论，但他们不会让我这样做，因为我的代表点数少于 50。

请在 document.ready 中添加这些代码，它们会正常工作。事件未注册，因为脚本在 DOM 加载之前执行。

是的，$lg 也未定义，但其他人提到了它，所以我保留了它。现在添加。

在准备好时添加 Class，在 mouseenter 时删除 class

Add Class on ready, remove class on mouseenter

html

css

jquery

onmouseover

lightgallery