Работа hover с .svg

[Torawhite]

Здравствуйте!

Прошу помочь со следующей проблемой: пытаюсь сделать замену одной картинки на другую при наведении на неё курсора мыши с помощью псевдокласса "hover", но ничего не выходит, картинка имеет расширение *.svg. Результат следующий: область, где должна быть картинка, работает, как ссылка, при наведении, но там пусто (изображения нет ни исходного, ни при наведении)!

 

html-код

 

<div id="vk_f">
            <a href="http://www.vk.com/" target="_blank" id="vk_f_1"></a>
            </div>

 

css-код

 

#vk_f {
    position:absolute;
    right:284px;
    top:85px;
    border:none;
    }
    
#vk_f_1 {
    background: url(images/vk_logo_0.svg);
    display: block;
    width: 30px;
    height: 30px;
    }
    
#vk_f_1:hover {
    background: url(images/vk_logo_1.svg);
    }

[npofopr]

Открыть фаербаг и посмотреть в чем дело?

Может у вас путь к картинкам не тот.

[Torawhite]

  On 5/23/2014 at 4:05 AM, npofopr said:

Открыть фаербаг и посмотреть в чем дело?

Может у вас путь к картинкам не тот.

Вот, что показывает фаербаг изначально: http://yadi.sk/d/lqmHdw86R4Z7u

и при наведении: http://yadi.sk/d/jmLIYRpkR4Z7Z

"scroll 0 0 rgba(0, 0, 0, 0)" - это вообще не понимаю, откуда он берёт!

[npofopr]

Еще раз говорю.

Проверяйте путь до картинок.

Все должно работать http://jsfiddle.net/2dj2D/

[Torawhite]

  On 5/23/2014 at 5:00 AM, npofopr said:

Еще раз говорю.

Проверяйте путь до картинок.

Все должно работать http://jsfiddle.net/2dj2D/

Путь верный. Может, дело в расширении - SVG?

[npofopr]

У меня в примере тоже svg.

Выложите свою страницу на какой нибудь хостинг

[Torawhite]

  On 5/23/2014 at 6:24 AM, npofopr said:

У меня в примере тоже svg.

Выложите свою страницу на какой нибудь хостинг

Вот страница: http://torawhite.ru/

в футере первая ссылка на Вконтакте, там, собственно, картинки и нет.

[npofopr]

Там и в коде нет картинки.

+ ко всему как я и говорил Failed to load resource: the server responded with a status of 404 (Not Found)

http://torawhite.ru/css/images/vk_logo_0.svg

 

В коде нашел.

Адрес вам надо писать 

background: url(../images/vk_logo_0.svg) no-repeat;

width и height вы указываете для блока, а не для беграунд-картинки.

которая еще и гигантских размеров. 

Добавьте 

background-size: contain;

чтобы картинка вписывала в ваши размеры блока.

[Torawhite]

  On 5/23/2014 at 6:41 AM, npofopr said:

Там и в коде нет картинки.

+ ко всему как я и говорил Failed to load resource: the server responded with a status of 404 (Not Found)

http://torawhite.ru/css/images/vk_logo_0.svg

 

В коде нашел.

Адрес вам надо писать 

background: url(../images/vk_logo_0.svg) no-repeat;

width и height вы указываете для блока, а не для беграунд-картинки.

которая еще и гигантских размеров. 

Добавьте 

background-size: contain;

чтобы картинка вписывала в ваши размеры блока.

Спасибо огромное! Получилось! А сколько я маялся с этим "hover"! Ссылки я потом пропишу абсолютные, это временно!

[SelenIT]

  On 5/23/2014 at 4:52 AM, Torawhite said:

"scroll 0 0 rgba(0, 0, 0, 0)" - это вообще не понимаю, откуда он берёт!

Это значения по умолчанию остальных компонент background (-attachment, -position, -color), которые подставляются автоматически, если не указаны явно. rgba(0,0,0,0) — синоним для transparent.