如何对网站标志翻转状态变化

Question

我目前使用squarespace模板，我想知道如何注入使我的标志翻滚状态变化的代码。所有我希望它做的是改变霓虹灯绿色那是我的主题的一部分上空盘旋时。到我的网站链接是www.henrykernsart.com

我试图寻找通过squarespace一个解决方案，到目前为止，还没有一个人帮我。

Answer 1

这可以使用自定义的CSS来实现。但是，由于squarespace模板往往有很大不同，你可能会做一些研究，以弄清楚。

有多种方式来注入自定义CSS到您的squarespace网站。我将说明他们的2。

影响你的整个网站 - 在你squarespace管理仪表板，去Design -> Custom CSS。这将打开一个侧面板具有一个大的文本框，您可以输入CSS代码。
影响只是一个单一的页面 - 打开网页要受到影响。在页面的层次结构面板，将鼠标悬停在你的页面，你会看到的齿轮图标。点击它来打开整个页面设置面板。点击Advanced选项卡上，这将打开一个文本框的CSS代码。

你输入的代码将在任何地方一样，用一个小的修改为单页选项。

你需要知道你的模板调用你的标志。如果你够幸运，你的标志形象将有它自己一贯的ID或唯一的类。（看你的网站，你是不是幸运，你没有。）我们可以使用该ID或类直接影响图像。

比方说，你的形象类是“页眉品牌车标”（那是我的是什么）。您的代码看起来就像这样：

.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'd，你将需要使用属性选择器和复杂的选择的组合。首先，找到一个有效的，恒定的ID或类。顺便说一句，这是不以“yui-”或“block_yui-”开头的ID。不要使用那些启动IDS。

在您的网站的模板，你有一个名为“标志图像”类。这可能是开始的好地方。从这里开始，你“描述”的路径，你的形象。

.logo-image >  a > img:hover{ ... }

在<div>（标有“标志图像”级）里面是<a>和<a>里面是你<img>。所以这是路径。

你如何获得这条道路？对我来说，最简单的方法是在Chrome中，右键单击徽标图像并选择“检查”。这将打开，从中可以检查您的网站的结构检查。

如果你不能找到一个很好的class和id，你必须使用一个属性选择的选项。上面找到了一个独特的属性，你的形象某处块。就像是

data-content-field="site-title"

您可以使用该属性为您的锚点。

[data-content-field="site-title"] > div > a > img:hover { ... }

很多方法来完成任务。它是一种乐趣搞清楚。（请记住，从那些 “yui-” IDS走就走！）

Answer 2

当您将鼠标悬停在图片是换出新的代码/不同的图像当前的代码/图像实际上会发生什么。话虽这么说，在CSS，你需要指定更换。如果该标志为静态图像，我会建议创建使用悬停颜色（在这种情况下 - 霓虹绿）的标志。然后设置悬停事件属性与悬停图像交换默认的标志形象。

此链接可以帮助你的：悬停事件属性：w3schools - CSS :hover selector