Как изменить состояние ролловера на логотипе сайта - PullRequest
Новая
       6

Как изменить состояние ролловера на логотипе сайта

0 голосов
/ 08 февраля 2019

В настоящее время я использую шаблон квадратного пространства и мне интересно, как внедрить код, который вызывает изменение состояния опрокидывания на моем логотипе.Все, что я хочу, это изменить цвет неона на зеленый, который является частью моей темы при наведении курсора.Ссылка на мой сайт www.henrykernsart.com

Я пытался найти решение через квадратное пространство, и никто до сих пор не помог мне.

Ответы [ 2 ]

0 голосов
/ 09 февраля 2019

Что на самом деле происходит при наведении на изображение, это заменяет текущий код / ​​изображение новым кодом / другим изображением.При этом в css нужно указать замену.Если логотип является статичным изображением, я бы порекомендовал создать логотип, используя цвет при наведении (в данном случае - неоновый зеленый).Затем установите свойство события hover, чтобы поменять изображение логотипа по умолчанию на изображение для наведения.

Эта ссылка может помочь вам с свойством события: hover: w3schools - CSS: селектор наведения

0 голосов
/ 09 февраля 2019

Это может быть выполнено с помощью пользовательского CSS.Но, поскольку шаблоны квадратного пространства имеют тенденцию к значительному изменению, вам, вероятно, придется провести небольшое исследование, чтобы выяснить это.

Существует множество способов внедрить пользовательский CSS в ваш сайт квадратного пространства.Я проиллюстрирую 2 из них.

  1. Влияние на весь ваш сайт. На панели инструментов администратора squarespace перейдите на Design -> Custom CSS.Откроется боковая панель с большим текстовым полем, где вы можете ввести код CSS.

  2. Влияние только на одну страницу - откройте страницу, на которую вы хотите повлиять.На панели иерархии страниц наведите курсор мыши на свою страницу, и вы увидите значок шестеренки.Нажмите на это, чтобы открыть панель настроек для всей страницы.Нажмите на вкладку Advanced, и это откроет текстовое поле для кода CSS.

Код, который вы введете, будет одинаковым в любом месте, с небольшой модификацией для одногоопция страницы.

Вам нужно будет знать, как ваш шаблон называет ваш логотип.Если вам повезет, у вашего логотипа будет свой собственный идентификатор или уникальный класс.(Глядя на ваш сайт, вам не повезло, а вашему нет.) Мы можем использовать этот идентификатор или класс для непосредственного воздействия на изображение.

Допустим, ваш класс изображения был "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: 

#block-a-bunch-of-id-numbers:hover{ ... }

Если вам не повезло с идентификатором вашего логотипа, вам нужно будет использовать комбинацию селекторов атрибутов и комплексных селекторов.Сначала найдите действительный, постоянный идентификатор или класс.Кстати, это идентификатор, который не начинается с "yui-" или "block_yui-".Не используйте идентификаторы, которые начинаются с них.

В шаблоне вашего сайта у вас есть класс с именем "logo-image".Это, вероятно, хорошее место для начала.Начиная с этого момента, вы «описываете» путь к вашему изображению. 

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

Внутри <div> (отмечен классом 'logo-image') есть <a>, а внутри <a> естьваш <img>.Так что это путь.

Как вы получаете этот путь?Самый простой способ для меня - это хромировать, щелкнуть правой кнопкой мыши на логотипе и выбрать «Осмотреть»Откроется инспектор, из которого вы сможете изучить структуру вашего сайта.

Если вы не можете найти хороший класс или идентификатор, у вас есть возможность использовать селектор атрибутов.Найдите блок где-то над вашим изображением с уникальным атрибутом.Что-то вроде 

data-content-field="site-title"

Вы можете использовать этот атрибут в качестве точки привязки. 

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

Множество способов выполнить задачу.Это довольно весело, чтобы понять.(Помните, держитесь подальше от этих "yui-" идентификаторов!)

...