我目前正在使用Squarespace模板，并且想知道如何注入代码以使徽标上的翻转状态发生变化。我要做的就是将鼠标悬停时更改为霓虹绿，这是我主题的一部分。我网站的链接是www.henrykernsart.com
我尝试过通过正方形空间寻找解决方案，但到目前为止，没有人帮助过我。
答案 0 :(得分：0)
这可以通过使用自定义CSS来完成。但是，由于Squarespace模板的差异往往很大，因此您可能需要做一些研究才能弄清楚。
有多种方法可以将自定义CSS注入您的Squarespace网站。我将说明其中的两个。
影响您的整个网站-在您的Squarespace管理控制台中，转到Design -> Custom CSS。这将打开带有大文本框的侧面板，您可以在其中输入CSS代码。
仅影响单个页面-打开要受影响的页面。在页面的层次结构面板中，将鼠标悬停在页面上，您将看到齿轮图标。单击该按钮以打开整个页面的设置面板。单击Advanced标签，这将打开一个CSS代码的文本框。
您输入的代码在任何地方都相同，只是对单页选项进行了少量修改。
您将需要知道模板将您的徽标称为什么。如果幸运的话，您的徽标图像将具有自己的一致ID或唯一类。 （查看您的网站，您并不幸运，而您的运气并不幸运。）我们可以使用该ID或类直接影响图片。
假设您的图片类别是“ Header-branding-logo”（这就是我的名字）。您的代码将如下所示：
.Header-branding-logo:hover {
content: url(https://the-url-to-your-alternative-logo-hosted-on-squarespace);
}
那是如果您要编辑整个站点的CSS。如果要在“高级”选项卡中进行特定于页面的编辑，则必须将其括在<style></style>中：
<style>
.Header-branding-logo:hover {
content: url(https://the-url-to-your-alternative-logo-hosted-on-squarespace);
}
</style>
如果徽标具有ID而不是类，则可以执行相同的操作，但是将使用#id：
#block-a-bunch-of-id-numbers:hover{ ... }
如果您不足够幸运地标识自己的徽标，则需要结合使用“属性选择器”和“复杂选择器”。 首先，找到一个有效的常量ID或类。顺便说一句，这是一个不以“ yui-”或“ block_yui-”开头的ID。请勿使用以这些开头的ID。
在您网站的模板上，您有一个名为“徽标图像”的类。那可能是一个很好的起点。从那里开始，您“描述”了图像的路径。
.logo-image > a > img:hover{ ... }
在<div>内（标有'logo-image'类）是<a>，在<a>内是您的<img>。这就是道路。
您如何获得那条路？对我来说，最简单的方法是在chrome中，右键单击徽标图片，然后选择“检查”。这将打开检查器，您可以从中检查站点的结构。
如果找不到好的类或ID，则可以选择使用“属性选择器”。在图片上方某处找到具有唯一属性的块。像
data-content-field="site-title"
您可以将该属性用作锚点。
[data-content-field="site-title"] > div > a > img:hover { ... }
完成任务的许多方法。弄清楚是一种乐趣。 （请记住，远离那些“ yui-” ID！）
答案 1 :(得分：0)
将鼠标悬停在图像上时实际发生的情况是，它将当前代码/图像替换为新的代码/不同图像。就是说，在CSS中，您需要指定替换项。如果徽标是静态图像，则建议您使用悬停颜色（在这种情况下为霓虹绿）创建徽标。然后设置悬停事件属性，以将默认徽标图像与悬停图像交换。
此链接可以帮助您使用：hover事件属性：w3schools - CSS :hover selector