Hover

[cruel09]

Подскажите пожалуйста, есть меню:

 

т.е ссылка + слева иконка

я сделал это так:

.menu li.faq{	background: url(../img/faq.png) no-repeat 20px center;}.menu li.news{	background: url(../img/news.png) no-repeat 20px center;}

Но, при наведении должен меняться цвет + добавляется еше 1 иконка вот так:

.menu li a:hover {	background: #d9d9d9 url(../img/menu-active.png) no-repeat 90% 50%;}

сделал я это вот так и в итоге у меня иконка слева пропадает при наведении, как исправить можно?

[Нарек]

Делать вторую иконку на ::after и показать его при

.menu li a:hover::after {	background: url(../img/вторая иконка);}

[cruel09]

Теперь там вообще нет эффекта при наведении 

[Нарек]

Дайте код полный.

[cruel09]

.menu a {

text-decoration: none;

color:black;

font-size: 14px;

height: 40px;

line-height: 40px;

padding-left: 50px;

}

.menu li a {

display: block;

}

.menu li.main{

background: url(../img/main.png) no-repeat 20px center;

}

.menu li.wallet{

background: url(../img/wallet.png) no-repeat 20px center;

}

.menu li.faq{

background: url(../img/faq.png) no-repeat 20px center;

}

.menu li.news{

background: url(../img/news.png) no-repeat 20px center;

}

.menu li.exit{

background: url(../img/exit.png) no-repeat 20px center;

}

.menu li a:hover::after {

background: url(../img/menu-active.png);

}

Edited December 28, 2014 by cruel09

[Нарек]

Так я же Вам сказал 

Делать вторую иконку на ::after

а Вы не сделав этого пытаетесь показать то чего в коде нет на  :hover. 

[cruel09]

Я не особо понимаю что значит "Делать вторую иконку на ::after"   

[Нарек]

Я не особо понимаю что значит "Делать вторую иконку на ::after"   

http://htmlbook.ru/css3/after

[cruel09]

Я знаю что такое after, я имею ввиду я не понимаю что нужно сделать в данном случае, 

ни так:

.menu li a:hover {	background: #d9d9d9 url(../img/menu-active.png) no-repeat 90% 50%;}.menu li.main a:hover::after {	background: url(../img/main.png) no-repeat 20px center;}

ни так:

.menu li.main a:hover {	background: url(../img/main.png) no-repeat 20px center;}.menu li a:hover::after {	background: #d9d9d9 url(../img/menu-active.png) no-repeat 90% 50%;}

не работает

[Нарек]

не работает

 

Все отлично работает. http://jsfiddle.net/uqyyjtqc/

 

 

 

Я знаю что такое after

 

А надо.

Edited December 28, 2014 by Нарек

[cruel09]

Странно, теперь с иконками все нормально, но если добавить фон при наведении то первая иконка пропадает

[Нарек]

У меня в примере тоже добавляется фон и ничего не пропадает. Я уже разжевал все что надо было, Вам остается лишь правильно скопировать код, с этим помочь не могу.