在 WordPress 中仅使用 custom.css 替换菜单中的项目答案

【问题标题】：Replace item in menu using only custom.css in WordPress在 WordPress 中仅使用 custom.css 替换菜单中的项目
【发布时间】：2017-07-21 00:00:51
【问题描述】：

当我向下滚动另一张图片时，我想替换这张图片。

首先，菜单如下所示：

当我向下滚动一点时，菜单看起来像：

是否可以在菜单中使用 custom.css 替换此项？我只想在另一张图片上替换这张图片。是否可以仅使用 custom.css 或者我需要访问文件并在此处使用 java 脚本？

如果有可能，有人能告诉我怎么做吗？

链接到我的网站：http://test.projekt-tenis.pl/wordpress/

【问题讨论】：

由于您要更改元素属性 (src) 而不是样式属性，您的解决方案可能是不可能的，或者非常难看（隐藏源图像但仍分配背景图像不知何故）。此外，您需要更改祖先元素，以便有条件地引用图像。但是，最重要的是，你没有给我们足够的信息。请包括Minimal, Complete, Verifiable Example。 （旁注：JavaScript 会更容易，是的。Java 完全不同。）
@KirkBeard 不要在这里踩到你的脚趾，但我认为 JavaScript 根本不应该被标记。 OP 在他要求仅修改 CSS 文件的解决方案中非常具体，因此我认为这个问题不值得 JS 标签 :)
已编辑。我只想在另一张图片的中间替换这张图片。当我只是滚动小页面时，菜单被更改：在白色背景上，同时我也想更改中间标志。

标签： html css wordpress

【解决方案1】：

试一试：

.is-sticky img.menu-image-title-hide {
    background: url(http://www.spiritvoyage.com/blog/wp-content/uploads/Screen-shot-2011-12-06-at-2.56.08-PM-150x150.png) no-repeat;
    width: 150px;
    height: 150px;
    padding-left: 150px;
}

应该做的伎俩。它将原始 src 图像移开并添加背景图像。就您的用户而言，它看起来就像从一个图像翻转到另一个图像。

之所以有效，是因为 .is-sticky 类被 js 添加到滚动时的标题中。

【讨论】：