2013-02-26 3 views
0

У меня есть меню, которое я подражаю старой колоде. У каждого элемента списка есть фоновое изображение кнопки. Когда элемент выбран, новое фоновое изображение показывает кнопку в нижнем положении. однако, я все еще вижу другое изображение внизу. Как я могу заменить исходное изображение на выбранное изображение. Пожалуйста, см. http://www.saintalvia.com, чтобы посмотреть, что я имею в виду.замена li background image

Спасибо!

#access a { 
font-family:Roboto; 
text-transform:uppercase; 
font-size:12px; 
padding: 0 9px 2px 9px; 
-moz-border-radius:0 0 0 0 !important; 
-webkit-border-radius:0 !important; 
-webkit-border-radius:0 !important; 
border-radius:0 !important; 
border-radius:0 !important; 
} 

#access .menu-header li, 
div.menu li { 
margin-top:0px; 
height:80px; 
} 

#access ul li { 
margin-right:8px; 
background-repeat:no-repeat; 
background-position:bottom; 
background-image:url(http://www.saintalvia.com/wp-content/uploads/2013/02/newButton.png); 
} 
#access ul li.current_page_item > a, 
#access ul li.current-menu-ancestor > a, 
#access ul li.current-menu-item > a, 
#access li.selected > a, 
#access ul li.current-menu-parent > a, 
#access ul li.current_page_item > a:hover, 
#access ul li.current-menu-item > a:hover { 
height:80px; 
background-color:transparent; 
background-repeat:no-repeat; 
background-position:bottom; 
background-image:url(http://www.saintalvia.com/wp-content/uploads/2013/02/buttonDownNew.png) 
} 

ответ

3

У вас есть «вверх» изображение, установленное на <li> и вниз набор на <a>. Установите нижний предел на <li> вместо <a>

Чтобы улучшить это, я бы также объединил вверх и вниз версии кнопки в одно изображение, чтобы создать так называемый CSS-спрайт. Затем, когда вы хотите переместить кнопку в нижнее положение, вам нужно всего лишь настроить background-position.

+0

спасибо, что отлично работает сейчас! Да ты прав. спрайт был бы хорошей идеей – Greg

0

У вас есть одно изображение в теге a и одно в теге li, поэтому, когда страница идет по ссылке, которую вы нажимаете, вы должны изменить изображение на те же теги, что и раньше, а не добавлять их сверху поверх другого тега. Любой тег должен работать, вам просто нужно выбрать его.

0

Похоже, что li имеет фон вверх, а кнопка li a имеет кнопку кнопки вниз.