Как сделать лого, чтобы оно при наведении меняло цвет?

Question

[Наталия]

Суть вопроса в том, что у меня логотип меняет цвет при наведении.
Но когда я пытаюсь сделать ему отступ сверху, логотип делает отступ вместе с фоном.
Как это исправить?
у меня вот, что написано
<a href="#" class="logo2"></a>

.logo2{
  background:url(loggg.png) no-repeat;
  width: 117px;
  height: 43px;
  margin-top: 35px;
  z-index: 8;
}
.logo2:hover{
  background: url(logg.png) no-repeat;
}

Answer 1

[Максим]

А лого у вас это что ? изображение или текст какой то ?

Comments

[Наталия]

изображение

[Максим]

Наташа, вы хотите что бы это изображение меняло цвет при наведении , так ?

[Наталия]

Максим Ленский, да, цвет у меня уже получилось менять, а вот с отступом проблемы.

[Максим]

Наташа, img у вас display: block ??

[Наталия]

Максим Ленский, да

[Максим]

Наташа, а что в вашем случае background: url ?

[Максим]

Наташа, кстати z-index у вас не работает ..так как работает это только с position

[Наталия]

Максим Ленский, ну первый url это типо серое лого, а второй url это уже белое лого

[Максим]

Наташа, я не понял , у вас лого это background ?или просто <a href=""><img src=""></a>?

[Наталия]

Максим Ленский, бэкграунд

[Максим]

Наташа, вот я и спрашивал по этому,покажите скриншот что предсатвляет щас это

[Наталия]

[Максим]

Наташа, ну лого можно переделать в (скажем SVG) тогда многие фокусы вам откроются ...
отступ от верха сделайте padding-top : в этом блоке в котором находиться ваше лого ..понимаете ??

[Наталия]

всё, у меня получилось, то что вы сказали на счёт position)
вот я туплю блин))
а вам спасибо за помощь

Answer 2

[Ольга Ветер]

используйте svg, и не надо будет всех этих костылей

Comments

[smart6person9maybe]

Я использую svg, но не знаю как делать чтобы при наведение, менялся цвет.

[Ольга Ветер]

Нужно посмотреть, из каких именно линий и фигур складывается логотип, разобраться в структуре свг-файла, возможно немного изменить ее для ваших нужд. Цвет свг меняется как правило свойствами css fill (для заливки фигур) и stroke (для обводки и линий). В некоторых случаях может влиять и color родителя, но там уже свои нюансы, разобраться в которых вам поможет гугл. Начать можно, например, отсюда css.yoksel.ru/svg-fill-and-stroke